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サン プル プロ グラ ム は 公式 Web ペ ー ジ 
か ら ダ ウン ロー ド で きま す SHOEISHA 


プロ グラ ミン グ の 世界 へ よう こそ! 


初め て プロ グラ ミン グ を 学ぶ 人 を 対象 に し た "スラ スラ わか る * 
シリ ー ズ の 新刊 で す 。 本 書 で は 、「JavaScript 関 連 の 知識 は ゼ 
ロロ ] と いう 状態 か ら 、 JavaScript の 基礎 知識 や 作法 、 基本 構 
文 、 基本 テク ニッ ク な ど を 無理 な く 習得 し 、 かつ プロ グラ ム が 
目力 で 作れ る よう に な る と ころ まで 、 し っ か り と フォ ロー し ま 
す 。 JavaScript の 基礎 固め を し っ か り し た い 方 だ け で な く 、 ほ 
か の 入門 書 で 挫折 し た 方 や プロ グラ ミン グ に 苦手 意識 を 持っ 
て いる 方 に も お すす め の 一 冊 で す 。 


本 書 が テー マ と し て いる 「JavaScriptl| は 、 Internet Explorer 
や Google Chrome な ど に 代表 され る ブラ ウザ で 利用 され る プ 
ログ ラミ ング 言語 で あり 、 いま や Web ア プリ ケー ショ ン 開 発 に 
欠 か せな い 知 識 で す 。 


本 書 で は JavaScript プ ログ ラミ ング の 基礎 を 無理 な く 学 べ る 
よう 、 図解 と 短い サン プル を 使用 し た わか りや すい 解説 を 目指 


し まし た 。 JavaScript プ ログ ラミ ング の 第 一 歩 と し て 、 ぜひ 本 
書 を お 役立て くだ さい 。 


スラ スラ わか が か る シリ ー ズ の Web ペ ー ジ 
http://WWW.ShoeiSha.CO.jD/Dook/Surasura/ 


・ サ ン ブ ル プ ログ ラム の ソー スコ ー ド ・ 補 中 資料 ・ 追 加 情報 ・・・ な ど 





生 形 8 可奈 者 


翔 泳社 eCO Project の ご 案内 

株 式 会 社 翔 泳社 で は 地球 に や さ し い 本 づく り を 目指 し ます 。 

制作 工程 に お いて 以下 の 基準 を 定め 、 こ の うち 4 項目 以上 を 満た し た も の 
を エコ ロジ ー 製 品 と 位置 づけ 、 シ ン ボ ル マ ー ク を つけ て いま す 。 
















素 漂白 パル プ ) 
資源 の 再生 循環 促進 (再生 循環 資源 紙 ) 





循環 資源 を 利用 し た 紙 


装丁 用 紙 
本 文 用 紙 材料 の 一 部 に 無 塩素 漂白 パル プ ある い | 有毒 な 有機 塩素 化合 物 発生 の 軽減 ( 無 塩 
は 古紙 を 利用 素 漂白 パル プ ) 
ご み 減 量 ・ 資 源 の 有効 活用 (再生 紙 ) 
製版 CTP (フィ ルム を 介さ ず デ ー タ か ら 直 接 | 枯 渦 資源 (原油 ) の 保護 、 産 業 廃棄 物 排 
プレ ー ト を 作製 する 方 法 ) 出 量 の 減少 
印刷 イン キ | 植物 油 を 含ん だ イン キ 枯 渦 資源 (原油 ) の 保護 、 生 産 可能 な 農 
業 資 源 の 有効 利用 
製本 メル ト | 難 細 裂 化 ホ ッ ト メ ルト 細 裂 化し な いた め に 再生 紙 生産 時 に 不純 
物 と し て の 回 収 が 容易 
装丁 加工 植物 性 樹 有 指 フ ィ ル ム を 使用 し た 加工 あぁ | 枯 渦 資源 (原油) の 保護 、 生 産 可能 な 農 
る い は フィ ルム 無 使用 加工 業 資源 の 有効 利用 


*: パー ル 、 メ タリ ッ ク 、 蛍 光 イ ン キ を 隊 く 


















本 書 内 容 に 関す る お 問い 合わ せ に つい て 


本 書 に 関す る ご 質問 、 正 誤 表 に つい て は 、 下 記 の Web サ イト を ご 参照 くだ さい 。 
| 正誤 表 http://www.shoeisha.co.jp/book/errata/ 
| 刊行 物 Q&A http://www.shoeisha.co.jp/book/qa/ 








イン ター ネッ ト を ご 利用 で な い 場 合 は 、FAX ま た は 郵便 で 、 下 記 に お 問い 合わ せく だ さい 。 
〒160-0006 東京 都 新 宿 区 舟 町 5 
(株 ) 翔 泳社 愛読 者 サー ビス セン ター 
FAX 番号 : 03-S362-3818 





電話 で の ご 質問 は 、 お 受け し て お り ま せん 。 


※ 本 書 に 記載 され た URL 等 は 予告 な く 変更 され る 場合 が あり ます 。 

※ 本 書 の 出版 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著者 や 出版 社 な どの いずれ も 、 本書 の 内 容 に 対し て な ん ら 
か の 保証 を する も の で は な く 、 内容 や サン プル に 基づく いか な る 運用 結果 に 関し て も いっ さい の 商 任 を 負い ませ ん 。 
※ 本 書 に 掲載 され て いる サン プル プロ グラ ム や スク リプ ト 、 お よび 実行 結果 を 記し た 画面 イメ ー ジ な ど は 、 特 定 の 
設定 に 基づい た 環境 に て 再現 きれ る 一 例 で す 。 


※ 本 書 に 記載 され て いる 会 社名 、 製 品名 は それ ぞ れ 各社 の 商標 お よび 登録 商標 で す 。 


は じ め に 


よう こそ TavaScript の 世界 へ ! 

本 書 を 手 に 取っ て いた だ き 、 ど う も あり が と う ご ざ いま す 。 

この 本 に 興味 を 持っ て くだ さっ た と いう こと は 、 き っ と 上 自分 の 力 で Web サ イ 
ト を 作る こと を 目的 と し て いる 方 な の で し ょ う 。 

で は 、 あ な た の 作り た い Web サイ ト は 、 ど の よう な も の で し ょ うか ? 

か ゆい と ころ に 手 が 届 く 、 ユ ー ザ ー フ レン ドリ ー な Web サ イト で すか ? そ 
れ と も 、 縦 横 無尽 に 動く アニ メー ショ ン が ちり ば め ら れ た だ た 、 イ マ ド キ の Web サ 
イト で し ょ うか ? ある い は 、 誰 も 作っ た こと の な い 、 あ な た だ け の 独創 性 に 
あふ れ た Web サ イト で し ょ うか ? 

本 書 は 、 そ ん な あな た の 手助け を する た め の ツ ー ル で す 。 あ な た の 目標 を 実 
現す る た め に 、TavaScript の 基本 を 習得 する まで の 間 、 学 習 の 道標 と な る の が 
本 書 の 役割 で す 。 

も し か し た ら 、 学 習 を 進め て いく うち に 「T]avaScript を 書く の は 難し い 」 と 
つま づく こと も ある か も し れ ま せん 。 そ ん な と き は 、 最 初 に 本 書 を 手 に 取っ た 
と き の 和 目的 を 思い 出し て みて くだ さい 。 大 切な の は 、 自 ら の 歩み を 止め な いこ 
と で す 。 少し ずつ で も 着実 に 進む めこ と で 、 あ な た が 頭 に 思い 描い た Web サ イト 
を 、 必 ず 現 実 の も の に する こと が で きま す 。 

本 書 を 読ん で いた だ いた 方 々 の 制作 し た Web サ イト が 、 イ ンタ ーネット 上 に 
あふ れ か える 日 を 楽し みか にし て いま す 。 
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本 書 に つい て 


本 書 は 、Web サ イト が どの よう に 作ら れ て いる の か を 知ら な い 、 プ ログ ラミ 
ング も し た こと が な い 、 と いう 初心 者 の 方 に 向け て 、JavaScript や Web に 関す 
る 技術 を 基礎 か ら や さ し く 解説 し た 人 門 書 で す 。 全 部 で 14 章 に 分 か れ て お り 、 
各 章 で JavaScript の 特定 の テー マ に つい て 解説 し ます 。 読 み 終え を る ころ に は 、 
TavaScript の プロ グラ ム を 作る た め に 最低 限 必要 な 知識 が 身 に つい て いる こと 
し 分 。 

各 章 に は 以下 の よう な 有 要素 が あり 、 理 解 を 助け ます 。 


1. 章 の 内 容 を イラ スト で 紹介 
各 章 の 冒頭 に は 内 容 を イラ スト で 紹介 する コー ナー が あり ます 。 ど ん な こと 
を 学ぶ の か 、 事 前 に 把握 し て 心 の 準備 を し て くだ さい 。 


2. 本 編 の 解説 
初め て の 方 で も 理解 で きる よう 、 上 難し い 言葉 は な る べく 使わ ず に 丁 密 に 説明 
し て めい まず す 。 


3. た くさ ん の 図解 
文章 に よる 説明 の 理解 を 助け る た め に 図解 を 使っ て 補足 し て いる の で 、 イ 
メー ジ を つか みや すく な っ て いま す 。 
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9 の srp5G ツ ng か 2 人 の E の 知っ て お いた ほ うか よ い 人 
な ど を まとめ て いま す 。 NZ 








や っ て は いけ な いこ と や 、 間 違い の も と な ど 、 注 意 が 必要 な 内 容 に つい て ま と 
め て いま す 。 


p 朋 説 し て きた こと を 、 有 再度 確認 する た め に 、 簡 潔 に まとめ て 
いま す 。 見 直し な ど を する 際 に 活用 し て くだ さい 。 





9. 例 

各 章 で は 、 実 際 に 動く サン プル プロ グラ ム を 例 に し て 解説 し て いま す 。“ 
スト X.1′ な ど と キャ プシ ョ ン が 付い て いる も の は 、 翔 泳社 の Web ペ ー ジ か ら 
ダウ ン ロ ー ド する こと が で きま す 。 ダ ウン ロー ド の 詳細 は 、 後 掲 の 「 サ ンプ ル 
の ダウ ン ロ ー ド に つい て | を お 読み くだ さい 。 

な お 、 紙 面 の 都合 上 、 コード が 折り 返し て ある と ころ は 、 同 で 示し て いま 
す 。 実際 の コー ド で は 周 を 削除 し て 、 次 の 行 と つなげ て 書い て くだ さい 。 


10. チェ ッ ク テ スト 
節 末 や 章 末 に は チェ ッ ク テ スト を 用 意 し て いま す 。 理解 度 を は か る た め に 、 
ぜひ チャ レン ジ し て みて くだ さい 。 


本 書 の 対象 読者 ・ 前 提 知 識 

本 書 は 、 プ ログ ラミ ング を や っ た こと が な い 初 心 者 を 対象 と し て いま す 。 必 
要 な 知識 は PC の 基本 操作 だ け で す 。 学生 の 方 か ら 社 会 人 、 一 度 は プロ グラ ミ 
ング を 始め た も の の 挫折 し て し まっ た 方 まで 、 幅 広く お 使い いた だ け ま す 。 


VI 





学習 の 進め 万 


本 書 は 、「 プ ログ ラミ ング 経験 が な い 方 で も 無理 な く 読 み 進 め ら れる 」 | 電車 
の 中 な ど で 読 みな が ら 理 解 で きる 」 と いう こと を 1 つの 目標 と し て 執筆 し まし 
た 。 わ か り に くい 概念 や プロ グラ ム の 実行 イメ ー ジ な ど を イラ スト や 図解 を 活 
用 し て 説明 し て いる た め 、 一 通り お 読み いた だ くだ け で も TavaScript を 体験 で 
きる で し ょ う 。 た だ し 、 プ ログ ラム を 自作 で きる よう に な る 近道 は 、 や は り | プ 
ログ ラム を 書く こと 」 で す 。 そ の た め 、 本 書 を | 読む ] だ け で な く | プログラ 
ム を 書く 」 こと も お すす めし ます 。 

TavaScript は 、 プ ログ ラミ ング 言語 と し て は 珍し く 、 開 発 環境 を 自分 で 構築 
する 必要 が あり ませ ん 。 横着 な 人 で も 今日 か ら す ぐに プロ グラ ミン グ を 始め る 
こと が で きま す 。 本書 で は 、「 プ ログ ラム を 書く 」 こと も 想定 し 、 す べ て の 項目 
ご と に サン プル プロ グラ ム を 掲載 し て いま す 。 実際 に プロ グラ ム を 上 自分 の 手 で 
入力 し 、 動 か し て みて くだ さい 。 こ れ が な に より 大 切 で す 。 プ ログ ラミ ング を 
実体 験 する こと で 、 学 習 内 容 の 理解 が より 一 層 深 まる こと で し ょ う 。 


第 1 章 一 第 3 章 JavaScript を 学ぶ 上 で の 事前 知識 で す 。JavaScript の 概要 
と 、JavaScript を 学ぶ に あたっ て 必要 な HTML/CSS の 基礎 的 な 知識 を 紹介 
し て いま す 。Web 制 作 に 関す る 知識 の ある 方 は 、 読 み 飛ば し て いた だ いて か 
まい ませ ん 。 

第 4 章 一 第 7 章 ゅ JavaScript の 基礎 文法 を 学び ます 。 動く Web ペ ー ジ を 作る 
わけ で は な い の で 少々 退屈 に 感じ る か も し れ ま せん が 、 こ こ で は 早く 先 に 進 
みた い 気 持ち を グッ と こら えて 、 ま ず は し っ か り と 基盤 を 固め まし ょ う 。 他 
の プロ グラ ミン グ 言 語 の 知識 の ある 人 は 、 軽 く 目 を 通す 程度 で 良い で し ょ う 。 
第 8 章 一 第 10 章 ゅ JavaScript を 使っ て 動き の ある Web ペ ー ジ を 作り ます 。 
入力 フォ ー ム の 状態 を 操作 し た り 、 ボ タン が クリ ッ ク さ れ た タイ ミン グ で 
HTML を 書き 換え た り し ます 。 実用 的 な サン プル プロ グラ ム も 多数 掲載 し て 
いま す の で 、 こ の 章 を 学び 終わ っ た 頃 に は 実際 に Web サ イト を 制作 する イ 
メー ジ が わい て くる こと で し ょ う 。 

第 11 章 一 第 14 章 ゅ JavaScript の ライ ブラ リ で ある jQuery を 利用 し て 、 ア ニ 
メー ショ ン や Ajax な どの より 高度 な 技術 に つい て 学び ます 。JavaScript を 実 


務 で 利用 する 上 で は 欠か せな い 知 識 で す 。 特 に 、 今 後 Web プロ グラ ミン グ を 
仕事 に し た いと 思っ て いる 方 に と っ て は 必修 の 内 容 と な り ま す 。 


サン プル の ダウ ン ロ ー ド に つい て 


本 書 に 掲載 し た サン プル プロ グラ ム の ソー スコ ー ド は 、 閉 泳社 の Web ペー ジ 


か ら ダ ウン ロー ド で きま す 。 以下 の URL に アク セス し て 、 リ ンク を クリ ッ ク し 
くだ さき W。 


サン プル の ダウ ン ロ ー ド 
p http://www.Shoeisha.Co.jpD/book/download/9784798125831 


また 、 シ リー ズ の 専用 ペー ジ を 用 意 し て いま す 。 こ の Web ペ ー ジ で は 、 本 書 
の 補足 資料 (サン プル 集 ) な ど を 掲載 する 予定 で す 。 


翔 泳 社 の 「 ス ラス ラ わ か る 」 シ リー ズ Web ペー ジ 
p http://Www.Shoeisha.CO.jD/DOOk/SuraSura/ 


サン ブル 集 に つい て 

上 記 の Web ペ ー ジ で は 、Web サ イト の 制作 で よく 使わ れ て いる 小 技 的 な 
]avaScript の サン プル 集 を PDF で 配布 し て いま す 。 本 書 の 学習 の 総 仕 上 げ と し 
て 活用 し て くだ さい 。 


サン プル プロ グラ ム の 動作 環境 に つい て 


サン プル プロ グラ ム を 実行 する に は 、 ブ ラウ ザ が 必要 で す 。 本書 で は 、 
Google Chrome を 使っ て 解説 し て いま す が 、 他 の プラ ウザ で も 実行 で きま す 。 
TavaScript で 必要 な 環境 に つい て は 1.3 節 、 サ ンプ ルプ ログ ラム の 実行 方 法 に つ 
いて は 2.3 節 お よび 4.1 節 を 参照 し て くだ さい 。 

な お 、 動 作 確認 は 以下 の 環境 で 行ない まし た 。 

OS @ Microsoft Windows 7/8 (64 ビ ッ ト ) 

開発 環境 @ Google Chrome、Microsoft Internet Explorer 8/9 
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JavaScCript と は 

Web ア プリ ケー ショ ン の 
仕組 み 

JavaScript の 開発 環境 











g JavaScript で な に が で きる の ? 参 


状況 に 応じ て Web ペ ー ジ の 表示 内 容 を | これ を 実現 する に は さま ざま な 方 法 が 
変え た いと き が あり ます あり ます が 、 手 軽 で 便利 な の は … 


人 環 グ / 【 還 NUM 
写真 を UP し た けど ] JavaScript に 市 
な ん か 地味 … お 任せ あれ ! 


JavaScript を 使う と 、 画 像 や 文字 を まず は JavaScript の 習得 に 必要 な 
動か し た り 、 ペ ー ジ の 一 部 だ け 知識 を お さえ て お きま し ょ う 
表示 内 容 を 更新 し た り で きま す 


// 写真 が 横 に 
流れ て いく ! 





まず は 学習 に あたっ て 、JavaScript と は どの よう な も の か 、 ま た 、Java 
Script を 取り 巻く 周辺 技術 な ど 、 事 前 に 知っ て お くべ き 基 礎 的 な 事柄 に つい 
て 見 て いき まし よう 。 













JaVvaS ら Cript と 
Web ペー ジ の 基礎 知識 





1 





くめ JavaScript と は 


本 書 の テー マ で ある JavaScript は 、 主 に ブラ ウザ 上 で 動作 する スク リプ ト 
言語 で す 。 

プラ ウザ は イン ター ネッ ト 上 の Web ペ ー ジ を 表示 する ソフ トウ ェ ア (道具 ) 
で す 。 ふ だ ん あま り 意 識 し ませ ん が 、 ス マー ト フ ォ ン や ケー タイ で も 専用 ブラ 
ウザ で Web ペ ー ジ を 表示 し て いま す 。 








叫 さ 


Internet Firefox Chrome Safari OM 」 
WNW ( 





さま ざま な 種類 の ブラ ウザ が ある 


で は 、 ス クリ プ ト 言 語 と は な ん で し ょ うか ? スク リプ ト 言 語 は 、 ブ プロ グラ 
ミン グ 言 語 の 一 種 で す 。 プ ログ ラミ ング 言語 と は 、 パ ソコ ン に 対し て な ん ら か 
の 作業 を 命令 する た め の 言 葉 で す 。 プ ログ ラミ ング 言語 で 記述 し た (書い た ) 
命令 文 を プロ グラ ム と 呼び ます 。 パ ソコ ン は 、 人 間 の 言葉 を 理解 する こと が で 
きま せん 。 し か し 、 プ ログ ラミ ング 言語 で プロ グラ ム を 記述 すれ ば 、 パ ソコ ン 
に 思い どおり の こと を や ら せ る こと が で きる の で す 。 








人 間 の 言葉 は 





プロ グラ ミン グ 言 語 は バ パソ コン に や ら せ た い 作 業 を 伝え る た め の 言 葉 


ちな み に 、 プ ログ ラム を 記述 する こと を プロ グラ ミン グ と 呼び ます (プロ グ 
ラム を 作成 する 開発 する と も 言い ます )。 

さま ざま な 種類 の プロ グラ ミン グ 言 語 が あり ます が 、 ス クリ プ ト 言 語 は その 
1 つ で 、 人 簡易 プロ グラ ミン グ 言 語 と も 呼ば れ て いま す 。 | 簡易] と つく こと か ら 
も わか る よう に 、 一 般 的 な プロ グラ ミン グ 言 語 よ り も 簡易 的 な 文法 で 記述 で き 
る の が スク リプ ト 言 語 の 特長 で す 。 プ ログ ラム を 記述 する 際 、 記 述 内 容 が わか 
りや すく 、 命 令 文 の 記述 量 も 少な く て 済む ため 、 プ ログ ラミ ング 初心 者 で も 習 
得 が 容易 と いう メリ ッ ト が あり ます 。 

また 、 ス クリ プ ト 言 語 で 記述 し た プロ グラ ム は スク リプ ト と も 呼び ます 。 


ます 。 


以降 、 本 書 で は 、JavaScript で 記述 し た プロ グラ ム は スク リプ ト と 表記 し 


TavaScript は 、 ブ ラウ ザ に 対し て な ん ら か の 作業 を 命令 する た め の ス クリ プ 
ト 言 語 で す 。TavaScript で 記述 し た スク リプ ト を 受け 取っ た ブラ ウザ は 、 そ の 
命令 文 を 実行 し ます 。 





ンプ 画像 を へ 
、 動 か し て くだ さい 
ューー 


と っ こと っ 
0 


JavaScript 可 革 
プ 


スク リブ プ ト 


JavaScript は ブラ ウザ に 作業 を 命令 する 





ブラ ウザ に 命令 で きる 作業 は 、Web ペ ー ジ 上 に 表示 する さま ざま な コン テ 
ン ツ (情報 ) の 操作 で す 。 つ まり 、TavaScript で スク リプ ト を 記述 する こと 
で 、「 動 き ] の ある Web ペ ー ジ を 作成 で きま す 。 た と えば 、 次 の よう な こと が 
TavaScript で 実現 で きま す 。 


@ Web ペ ー ジ に アニ メー ショ ン 効 果 を 追加 する ( 色 や 形 の 変更 、 ス クロ ー 
ル な ど ) 

@ Web ペ ー ジ を 切り 替え ず に 表示 の 一 部 だ け を 更新 する (置き 換え る 

@ リ アル タイ ム に Web ペー ジ 上 の 入力 値 チ ェ ッ ク や 計算 を 行なう 

@ Web ペ ー ジ 上 の ボタ ンク リッ ク で ウィ ンド ウ を 開閉 する 


JavaScript は 、 よ く プ ログ ラミ ング 言語 の Java と 混同 され る こと が あり 


ラン ます が 、 Java と JavaScript は まっ た く の 別 物 で す 。JavaScript は 、 当 
初 LiveScript と いう 名 前 で し た が 、Java の 人 気 に あ や か っ て JavaScript に 名 


称 が 変更 され まし た 。 







Web サ イト と Web ペ ー ジ 
「Web サ イト 」 と 「Web ペ ー ジ 」 と いう 言葉 は 、 同 じ 意味 で 使わ むれ る こと も あ 
り ま す が 、 厳 密 に は 使い 分 け ま す 。 よ く 、Web サ イト は "一 冊 の 本 "、Web ペ ー 
ジ は "本 の 1 つ 1 つの ペー ジ " に た と えら れ ま す 。 通常 、 複 数 の Web ペ ー ジ が 
集まっ て Web サ イト が 作ら れ て いる か ら で す 。 以下 は 、 本 書 の 公式 Web サ イト 
の ペー ジ 構 成 で す 。 Web サ イト を ブラ ウザ で 表示 し た と き 、 最 初 に 表示 され る 
Web ペ ー ジ の こと を 「 ト ッ プ ペー ジ 」 と 呼び ます 。 











http://www.shoeisha.com/book/hp/surasura/ 





Web サ イト 
トッ プペ ー ジ 
『ー 、( 最 初 に 表示 され る Web ペー ジ ) 


TE EE 





| http://www.shoeisha.com/ http://www.shoeisha.com/ http://www.shoeisha.com/ http://www.Shoeisha.com/ 
book/hD/Surasura/ book/hD/Surasura/ book/hD/Surasura/ book/hD/Surasura/ 
C.html php.html javascript.html csSharp.html 


Lei ト は 複数 の Web ペ ー ジ の 集合 体 . 


ちな み に 、 Web サイ ト は 「 サ イ ト 」、 Web ペ ー ジ は [ページ] と も 言い ます 。 

な お 、Web サ イト や Web ペ ー ジ を 「 ホ ー ム ペー ジ 」 と 呼ぶ 場合 が あり ます が 、 

本 来 、 ホ ー ム ペー ジ と は 、 ブ ラウ ザ を 起動 し た と き 、 あ る い は ブラ ウザ の ホー ム 
ポタ ン を 押し た と き に 表示 され る Web ペ ー ジ の こと を 指し ます (これ は 『 スタ ー ' 
トペ ー ジ 」 と も 言い ます )。 4 0 0 


(2) Web ペー ジ を 作成 する た め の 技 術 


Web ページ の 作成 に TavaScript を 利用 する 場合 、 関 連 技術 の 知識 も 必要 不可 
欠 で す 。Web ペー ジ の 作成 に は 、 主 に 次 の 3 つの 技術 が 用 いら れ ま す 。 








エイ チ テ ィ エ ム エ ル 


@ HTML (HyperText Markup Language) : タイ トル や 見 出し 、 文 章 、 画 
像 な ど 、Web ペ ー ジ 上 に 表示 する コン テン ツ を 定義 する 言語 。 

e CSS (Cascading Style Sheets) : コ ン テ ン ツ の 色 や 配置 な ど 、Web ペー 
ジ の デザ イン (見 た 目 ) を 定義 する 言語 。 

@ JavaScript : Web ペー ジ の コン テン ツ (HTML) や デザ イン (CSS) を 


操作 する な ど 、Web ペー ジ の | 動き ] を 定義 する 言語 。 









Web ペー ジ の デザ イン 


(見 た 目 ) を 定義  」 天 生け 








Web ペー ジ 2 









Web ペー ジ 上 に 表示 する 
要素 を 定義 


動き (操作) 上 


HTML や CSS を 操作 する な ど 、 
Web ペー ジ の 「 動 き ] を 定義 


Web ペ ー ジ の 作成 に 必要 な 技術 
この 3 つが Web ペ ー ジ を 作成 する た め の 基 本 セッ ト で す 。 次 の 点 に 注目 し て 
くだ さい 。 


@ HTML で Web ペー ジ を 作成 し て 、CSS で デザ イン を 適用 し 、JavaScript 
で Web ペー ジ の 要素 や デザ イン を 操作 する 


よっ て 、TavaScript を 習得 し 、 か つ 使 いこ な す に は 、HTML や CSS の 基 人 的 


な 知識 が 必要 に な り ま す (HTML と CSS に つい て は 第 2 章 と 第 3 章 で 詳し く 解 
呪 し ます )。 








続い て 、TavaScript と 関わ り の 深い Web ペ ー ジ の 概念 に つい て 学び まし ょ 
せい て き どう て き 証 
う 。Web ペ ー ジ に は 、 静 的 な Web ページ と 動 的 な Web ペー ジ の 2 種類 が あり 
ます 








HTML+CSS HTML 圭 CSS 寸 JavaSCript 
動 的 な Web ペー ジ シ 





静 的 な Web ペ ー ジ と 動 的 な Web ペ ー ジ の 違い 


JavaScript は も と も と 、Web ペ ー ジ に 「 動 き ] を 持た せる た め に 作ら れ た 言 
語 で す 。TJavaScript が 普及 する 前 は 、HTML と CSS に よる 、 あ ら か じ め 決 め ら 
れ た 文章 や 画像 を ユー ザー に 見 せる だ け の Web ペ ー ジ が ほとん ど で し た 。 つ 
まり 、 同 じ URL に アク セス し た 場合 、 毎 回 同じ 内 容 や デザ イン が 表示 され る 
Web ペ ー ジ で す 。 こ れ を 静 的 な Web ペ ー ジ と 呼び ます 。 

これ に 対し て 、 動 的 な Web ペー ジ は 、 同 じ URL で あっ て も 異な る 内 容 や デ 
ザイ ン が 表示 され ます 。 た と えば 、 よ く あ る の が 次 の よう な Web ペ ー ジ で す 。 


@ 10 秒 お さき に トッ プ ニ ュ ー ス 一 覧 が 入れ 替わる 

@ ペー ジン 全体 の テー マカ ラー を ユー ザー が 上 自由 に 選択 で きる 

@ マウ スカ ー ソ ル が 画像 の 上 に 乗る と 別 の 画像 に 切り 替わる 

@ 1 つ 目 の セレ クト ボッ クス か ら 都 道府県 を 選択 する と 、2 つ 目 の セ レク ト 
ボッ クス で 市 区 町 村 を 選択 で きる よう に な る 


どれ も Web ペー ジ で よく 見 る 表現 で す よ ね 。 JavaScript は 現在 、Web ペ ー 
ジ 上 で 多彩 な 表現 を 実現 する た め に 欠か せな い 技 術 と な っ て いま す 。 


p パソ コン の 世界 で の 「 言 語 | と は 、 人 が パソ コン に 命令 する た め の 言 葉 。 
プロ グラ ミン グ 言 語 で パソ コン へ の 命令 文 (プロ グラ ム ) を 記述 する 。 


p JavaScript と は 、 ブ ラウ ザ に 作業 を 命令 する た め の プ ログ ラミ ング ( ス 
クリ プ ト ) 言語 。 


JavaScript を 利用 する と 、「 動 き ]」 の ある Web ペ ー ジ を 作成 
で きる 。 


p Web ペ ー ジ に は 、 静 的 ペー ジ 、 動 的 ペー ジ の ら 8 種 類 が ある 。 


| eetcid:eey vc に ir 本 ! 


Q⑳ 1 以下 は Web ペ ー ジ の 制作 に 利用 する 主 な 技術 の 説明 で す 。 空 杉 A 一 C を 
埋め て くだ さい 。 


Q2 以下 は ブロ グラ ミン グ 言 語 と スク リブ ト 言 語 の 説明 で す 。 空 欄 A 一 D を 
埋め て くだ さい 。 
説明 


用 g 


ミ 五 
ラミ ング | 一] に 対し て な ん ら か の 作業 を | B | する た め の 言 語 


プロ グラ ミン グ 言 語 の 一 種 だ が 、 プ ログ ラミ ング 言語 より も な 
文法 で 記述 で きる と いう 特長 を 持つ 。 別名 [ D | と も 呼ば れる 


Q 静 的 な Web ペ ー ジ 、 動 的 な WebD ペ ー ジ と は な ん で すか ? 





つの 解答 は 巻末 に 掲載 








イン ター ネッ ト の 仕組 み 


続い て 、 こ れ ま た Web ペ ー ジ を 作る と き に は 欠か せな い 、 サ ー バ ー と クラ イ 
アン ト と いう 概念 に つい て 学び まし ょ う 。 次 の 図 は 、 イン ター ネッ ト の 仕組 み 
を 簡単 に 表わし て いま す 。 





⑩ URL を 指定 (リク エス ト ) 
2 WP 






9 の 該当 する ペー ジ を 返す 
(レス ポン ス ) 


ププ リザ Web サー バー 





クラ イア ント / に バン 
クラ イア ント は 、 サ ー バ ー ヘ へ サー バー は 、 ク ライ アン ト か ら の リク エス ト に 
リク エス ト (要求 ) を 送信 。 対し て 、 レ スポ ンス (応答 ) を 送信 。 


その 結果 と し て 情報 を 受け 取る 他 の バ ソ コン に 対し て 、 情 報 や サー ビス を 提供 
イン ター ネッ ト の 仕組 み ' 


Web サ ー バ ー と は 、Web サ イト を イン ター ネッ ト に 公開 する た め の ソ フト 
ウェ ア を 搭載 し た パソ コン の こと で す 。 ク ライ アン ト は 、 各 ユー ザー の パソ コ 
ン に 搭 載 さ れ た プラ ウザ で す 。 

Web サ ー バ ー が Web サ イト を 公開 する と 、 サ イト 内 の 各 ペ ー ジ に は それ ぞ 
れ イ ンタ ーネット 上 の 住所 で ある URL が 割り 振ら れ ま す 。 こ の URL に クラ イ 
アン ト か ら ア クセ ス す る こと で 、 該 当 す る Web ページ を 見 る こと が で きる 仕組 
み に な っ て いま す 。 





Web ア プリ ケー ショ ン と スク リプ ト 


Web サ イト の 中 で も 、 シ ョ ッ ピ ング サイ ト な どの 複雑 な 機能 を 持っ た Web サ 
イト の こと を Web ア プリ ケー ショ ン と 呼び ます 。 た と えば 、Google や Yahool 
な どの 検索 サイ ト 、Amazon や 楽天 市 場 な どの ショ ッ ピ ング サイ ト 、Gmail や 
Yahoo! メ ー ル 、 ど れ も Web ア プリ ケー ショ ン で す 。 Web ア プリ ケー ショ ン は 、 
一 般 的 に 複数 の プロ グラ ミン グ 言 語 や スク リプ ト 言 語 を 組み 合わ せ て 作ら れ て 
いま す 。 

各 ス クリ プ ト 言 語 は 、 サーバー サイ ドス クリ プ ト と クラ イア ント サイ ドス ク 
リプ ト の どちら か に 分 類 さ れ ま す 。 

た と えば 、 サ ー バ ー サ イド スク リプ ト に は 、PHP や Ruby と いう 言語 が よく 
利用 され ます 。 サ ー バ ー サ イド スク リプ ト は 、 デ ー タ ベー ス (デー タ を 管理 す 
る ソフ トウ ェ ア ) と の 連携 が 主 な 役割 と な り ま す 。 た と えば 、 シ ョ ッ ピ ング サ 
イト の 場合 、 顧 客 情報 や 商品 情報 な どの 膨大 な デー タ が デー タベース に 保存 き 
れ て いま す 。 こ の デー タ を 引き 出し て 画面 に 表示 し た り 、 ユ ー ザ ー か ら の 注文 
デー タ を 新た に 保存 し た りす る の が サー バー サイ ドス クリ プ ト の 役割 で す 。 









ショ ッ ピ ング カー ト 
T シ ャ ツ 1 点 


ーーーーーーーーーーーーーーーーーーーーーーーー 一 













内 Web サ ー バ ー 


クラ イア ント 人 eeee 
サー バー サイ ドス クリ プ ト の 役割 
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それ に 対し て クラ イア ント サイ ドス クリ プ ト は 、 そ の シェ ア の ほとん ど を 
TavaScript が 独占 し て いま す 。 ク ライ アン ト サ イ ドス クリ プ ト は 、Web ペー ジ 
の 操作 が 主 な 役割 に な り ま す 。 マ ウス カー ソル や ブラ ウザ の ウィ ンド ウサ イズ 
な ど 、 各 クラ イア ント の 状態 を 見 て 、 そ れ に 合わ せ た 表 示方 法 に 切り 替え る こ 
と が で きま す 。 


ウィ ンド ウ が マウ スカ ー ソ ル が 
最大 化 さ れ た か ら 動い た か ら 
画像 を 大 きく __ \、 別 の 画像 を 表示 し よう 


表示 し よ つ 


サー バー と の 通信 ya で 
員 すべ て クラ イア ント 側 で 処理 





クラ イア ント スク リブ ト の 役割 


クラ イア ント サイ ドス クリ プ ト は 、 サ ー バ ー サ イド スク リプ ト に 比べ て 、 次 
の よう な メリ ッ ト が あり ます 。 


@ ク ライ アン ト 側 で 動作 する の で 、 サ ー バ ー に 負荷 が 集中 し な い 

@ サ ー バ ー 側 か ら の レス ポン ス を 待た な いた め 、 処 理 速 度 が 速い 

@ ブ ラウ ザ さ え あ れ は ば 動作 する の で 、 開 発 環境 (スク リプ ト を 作る た め の 
環境 ) を 構築 する 手間 が か か ら な い 


クラ イア ント サイ ドス クリ プ ト の デメ リッ ト 








クラ イア ント サイ ドス クリ プ ト は 、 プ ラウ ザ 上 で 動作 し ます が 、 実 は 各 
プラ ウザ に よっ て スク リプ ト の 解釈 が 異な る と いう 大 き な 問 題 が あり ます 。 
イン ター ネッ ト エク スプ ロー ラー ー ム ファ イア フォ ックス 


Internet Explorer、 keOdihls Firefox、 ea な どの 主要 な ブラ ウザ 間 で も 、 
スク リプ ト の 実行 結果 に 微妙 な 違い が 発生 し ます 。 








の 画 NN ンー CAowtton ン ouaediooco、、 
0 ト ) ( 左側 の 。 ヽ 真ん中 の ン n ゃ 、 右側 の Y 
ヽ 、 画像 か な ? ノ \、 や つ で し ょ ? の で いり ま よ ? ノ 
di リッ ei ニン ンー 
- ア ア 
B C 





合 種 ブラ ウザ 


ブラ ウザ に よっ て 命令 の 解釈 が 異な る 


この 問題 の 解決 方 法 し て 、TavaScript の ライ ブラ リ (ある 機能 を まとめ た 
も の ) で ある jQuery の 利用 が 挙げ られ ます 。 jQuery を 使う こと で 、 ブ ラウ ザ 
間 の 差異 を 吸収 し 、 ま っ た く 同 じ 動 作 を させ る こと が 可能 と な り ま す 。 


jQuery は 、JavaScript を 手軽 に 利用 で きる よう に する ライ ブラ リ で す 。 
jQuery を 使う と 、Web ペ ー ジ に 対す る 複雑 な 操作 も より 簡単 に 記述 で き 


る よう に な り ま す 。 jQuery の 詳し い 使 い 方 は 第 1 1 章 以 降 で 学び ます 。 


を Web ア プリ ケー ショ ン は 、 サ ー バ ー サ イド スク リブ プ ト と クラ イア ン 
ト サ イ ドス クリ プ ブ ト で 構成 され る 。 


p ブラ ウザ の 種類 や バー ジョ ン に よっ て スク リプ ト の 解釈 が 異な る 場 
合 が ある 。 そ れ を 解消 する た め に JavaScript の ライ ブラ リ を 使う 。 


サー バー へ | A | を 送信 。 その 結果 と し て 情報 を 受け 取る 。 各 ユ ー ザ ー 

の パソ コン に 搭載 され た | B | の こと 

クラ イア ント か ら の |  A | に 対し て 、| C | を 送信 。 Web サイ 

ト を イン ター ネッ ト に 公開 する た め の ソ フト ウェ ア を 措 載 し た パソ コン を 
と 呼ぶ 


⑳⑳ サー バー サイ ドス クリ プ ト 、 ク ライ アン ト サ イ ドス クリ プ ト と は な ん で 
すか ? 





つ 解 答 は 巻末 に 掲載 
13 
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NN 
ノノ // 


最後 に 、]avaScript の 開発 環境 を 準備 し まし ょ う 。T]avaScript で ブロ グ 
ング する と き に 最低 限 必要 な の は 、 次 の 2 つ で す 。 


@ テ キス ト エ ディ タ 
@ ブラウザ 


テキ スト エディ タ で スク リプ ト (プロ グラ ム ) を 書き 、 ブ ラウ ザ で 動作 を 確 
認 (テス ト ) し ます 。 他 の プロ グラ ミン グ 言 語 と 比べ て 、 非 常に 簡単 に 開発 環 
境 が 準備 で きる の も TavaScript の 特長 で す 。 


か 
テキ スト エディ タ は 、 パ ソコ ン で テキ スト (パソ コン の 画面 に 表示 可能 な 
ンー と 2 


文字 情報 ) の み の フ ァイル を 作成 編集 / 保 存する た め の ツ ー ル で す 。 ち 
な み に 、 テ キス ト の み を 記録 し た ファ イル の こと を テキ スト ファ イル と 呼び ます 。 


%9) テキ スト エディ タ 


Windows な ら メ モ 帳 、Mac な ら TextEdit が 標準 で 付い て いま す が 、TJava 
Script の キー ワー ド が 人 色付き で 表示 され る 、 高 機能 な も の を 利用 する と 良い で 
し ょ う 。 ふ だ ん 使っ て いる も の が あれ ば それ で も か まい ませ ん 。 お すす め は 、 
次 の テキ スト エディ タ で す (どちら も フリ ー ソ フト で す )。 








@ TeraPaAQd ……………… http://www5f.bigloDe.ne.jp/ tt 上 susumu/IiDrary/tpad.html 
@$ サ クラ エディ タ …http://sakura-editor.Sourceforge.net/ 


た だ し 、 あ くま で 学習 用 と いう こと で 、 本 書 で は Windows に 装備 され て いて 
入手 の 手間 が な い メ モ 帳 を 使い ます 。 






_ 1.3 JavaScript の 開発 環境 


メモ 帳 の 起動 方 法 ン ・kLLLTO.I、 


Windows 8 と それ 以外 の 08 で 起動 方 法 が 異な り ま す 。 こ こ で は 、Windows 
8 と Windows 7 の 場合 の 起動 方 法 を 紹介 し ます 。 メ モ 帳 の 利用 時 に は 、[ 書 式 
(0)]」 メニ ュー の [右端 で 折り 返す (W)] を 選択 し て お く と 、 プ ログ ラム が 折り 返 
され て 見 や すく な り ま す 。 





の Windows 8 の 場合 


まず 次 の 手順 に 従っ て 、 デ スク トッ プ 画 面 の 下部 の タス ク バ ー に メモ 帳 を 追加 
し ます 。 


⑩ Windows 8 に ログ イン し ます 。 

の スタ ー ト ペー ジ の な に も 表示 され て いな い 部 分 で 、 マ ウス を 右 ク リッ ク す る 
と 、 画 面 下 部 に 「 す べ て の アプ リ 」 が 表示 され ます 。 こ の 「 す べ て の アプ リ )」 
を クリ ッ ク し ます 。 





すべ て の アプ リ が 表示 され る の で 、 画 面 を 右側 へ ヘス クロ ー ル し て いく と 「 メ 
モ 帳 ] の 起動 メニ ュー が あり ます 。 





アプ リ ペ ー ジ の 「 メ モ 帳 」 を 右 ク リッ ク 








の 「 メ モ 帳 」 を 右 ク リッ ク す る と 、 画 面 下 部 に 「 タ スク バー に ピン 留め する 」 
が 表示 され る の で 、 こ れ を クリ ッ ク し ます 。 








。 アー - と こ ふ 
(⑨ |@⑩ 。 ⑮ 
7 ビン トン こ 
し 
NN すき 


アプ リ ペ ー ジ 下部 の 「 タ スク バー に ピン 留め する 」 を クリ ッ ク 


③@ の 画面 に 戻る の で 、 今 度 は 「 メ モ 帳 ] を クリ ッ ク し ます 。 す る と 、 メ モ 帳 
が 起動 し ます 。 


これ で デス クト ッ プ 下部 の タス ズ スク バー に メモ 帳 の アイ コン が 追加 され ます 。 次 
回 か ら は 、 こ の アイ コン を クリ ッ ク す れ ば メモ 帳 を 起動 で きま す 。 






6 要 
拉 

す 3 
に 1 コ 


デス クト ッ プ 下部 に メモ 帳 の アイ コン が 追加 され て いる 


@Windows ア の 場合 
ます 次 の 手順 に 従っ て 、Windows の スタ ー ト メニ ュー に メモ 帳 を 追加 し ます 。 


% Windows アプ に ログ イン し ます 。 
の デス クト ッ プ 画面 の 左下 の スタ ー ト ボタ ン 蘭 を マウ ス で クリ ッ ク し 、 さ ら に 
[すべ て の プロ グラ ム ] 一 [アクセサリ ] の 順 で クリ ッ ク し ます 。 





Windows の スタ ー ト ボタ ン を クリ ッ ク 
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1.3 JavaScript の 開発 環境 


メニ ュー 一 覧 の [メモ 帳 ] を 右 ク リッ ク し 、[ ス ター トメ ニュ ー に 表示 する ] 
を クリ ッ ク し ます 。 


これ で Windows の スタ ー ト メニ ュー に メモ 帳 が 追加 され ます 。 次 回 か ら は 、 
デス クト ッ プ の スタ ー ト ボタ ン を クリ ッ ク し て 直接 、 メ モ 帳 を 起動 で きま す 。 


1 AN Ye 且 二 NR 0 給 39225 し お 洋介 ダダ ィ EE 





スタ ー ト メニ ュー に メモ 帳 が 追加 され た 


ブラ ウザ 

ブラ ウザ も ふだん 使っ て いる も の が あれ ば それ で も 良い で す が 、 開 発 の し や 
すき さか ら 考 える と 、Chrome や Firefox が お すす めで す 。Firefox は Firebug と 
いう 開発 用 ツー ル を 別途 イン スト ー ル する 必要 が ある た め 、 本 書 で は Chrome 
を 使い ます 。 下 記 の Web ペ ー ジ か ら ダ ウン ロー ド し て イン スト ー ル し て お きま 
し まう 。 





httpS://WWW.gOOgle.COm/intl/ja/Chrome/DrOWSer/ 


た だ し 、 前 節 で 触れ た よう に JavaScript は ブラ ウザ に よっ て 動作 結 洒 が 個 な 
る 場合 が あり ます 。 開発 が 終了 し 、 実 際 に イン ター ネッ ト に 公開 する 前 に は 必 
ず 他 の 主要 ブラ ウザ で も スク リプ ト が 問題 な く 動作 する こと を 確認 する よう に 
し まし まり ュ 
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し AALEAJANA LA 
ず リ 本 * て 


囚 


hw Wei At AG。 か か My か も iv か tky (tty は の ひも 0 小 せ か せい 3 
3 基礎 知識 と 準 1 時 失 時 和 村 は は は は 林 持 は 
HMV は 午 PREEPESETPELCYECEYSEDUCUONUUKCTCKCKCCAEKXKEANKOCNIYSTAO 





表 1.1 主要 ブラ ウザ ー 覧 
名 前 



















ーー ーー…ーーー ーーーーーーー…・ 













入手 先 (公式 Web サイ ト ) 


https://WwwwW.google.Com/intl/ja/Chrome/DbrowSser/ 


http://windows.microsoft.com/ja-JP/internet-explorer/DrOoduCtS/ 
Internet Explorer PR 


FirefOx http://Www.mozilla.jp/firefox/ 
Opera httD://jD.ODera.COm/ 


http://WwW.apDpDle.Com/jp/Safari/ 





ファ イル の 拡張 子 を 表示 する 設定 (Windows の 場合 ) 


本 書 で は 、 フ ァイル の 拡張 子 が 表示 され る よう に 設定 し て いま す 。 拡 張子 と 
は 、 フ ァイル 名 の 「.」 と その 右側 の 英 数 字 の こと で 、 フ ァイル の 種類 を 表わす 識 
別 子 で す 。 本 書 を 読み 進め る 前 に 、 次 の 手順 に 治っ て 拡張 子 を 表示 し て お いて く 


だ さい 。 


0⑩ Windows 8 の 場合 、 ス ター ト 画 面 で 「 デ スク トッ プ 」 を クリ ッ ク し ます 。 
Windows 7 の 場合 、 ス ター ト ボ タン を クリ ッ ク し 「 ス ター ト 」 メニ ュー を 


表示 し ます 。 


の @「 コ ント ロー ル パ ネ ル 」 を クリ ッ ク し ます 。Windows 7 の 場合 、 さ ら に 「 デ 
スク トッ プ の カス タマ イズ 」 を クリ ッ ク し ます 。 
9「 フ ォ ル ダー オプ ショ ン 」| を クリ ッ ツ ク す る と 、「 フ ォ ル ダー プシ ジョン 】 0 


アロ グ ボ ックス が 表示 され ます 。 
〇 [表示]」 タブ を クリ ッ ク し ます 。 


[登録 され て いる 拡張 子 は 表示 し な い 」 の チェ ッ ク を は ず し ます 。 


③ [OK] ボタ ン を クリ ッ ク し ます 。 


金 般 表示 検索 
カル ダー の 隔 示 
て の フォ ル ダ ー に 使用 し て いる 表示 方 法 (詳細 表示 や アイ コン な ど ) 
YY] を ご の 種 娠 の フォ ル ダ ー す べ て に 連用 する ご と が で きま す 。 


ォ ル ダー に 因 用 ( い | オルグ ー を りや ッ ト (R) 


て ) 検 素 沙 ッ クス に 長 動 的 に 入力 する 
側 ) 入力 し た 項目 を ュー で 六 択 する 
] ログ オン 時 に 以前 の フォ ル ダ ー ウィ ンド つき 表示 する 
| 忠則 化 や 圧 さ れ た NTFS ファ イル を カラ ー で 表示 する 
マッ | 共有 つ ィ ザー ド を て 使用 する ( 堆 導 ) 
マ | 将 の げ ラ イブ は [コン ビ ピュータ ー] フォルダ ー に 本 示し な い 
y| 手 小 析 に ファ イル アイ コン を 表示 する 
「 ] 涯 に アイ コン を 表示 し 、 縁 路上 誠 は 豆 示 し な い 
] 掌 に メニ ュー を 表示 する 
上 符 環 まれ れい る 拓 眉 子 さ 数 示し が) 


| 別 の プロ セス で フォ ル ダ ー ウィ ンド ウ ず 間 く 
マ | 胡 護 され た オペ レー ティ ング シス テム ファ イル を 表示 し な い ( 挫 般 ) ご 


必定 値 に 戻す (D) 


キネ キャンセ ル 馬 用 (A) 


「 フ ォ ル ダー オブ プション 」 ダ イア ログ ボッ クス 


ーーーーーーーーーーーーー 





JavaScriDt は 、 テ キス ト エ ディ タ で 記述 し 、 ブ ラウ ザ で 動作 を 
確認 する 。 


ご の 韻 の 到達 摩 チ ェ ッ ク 


⑳ 1 JavaScript と は な ん で すか ? 
⑳@⑳ JavaScript の 実行 環境 は な ん で すか ? 


⑳③ 以下 は サー バ サ イ ドス クリ プ ト と 比較 し た 、 ク ライ アン ト サ イ ドス クリ 
プ ト の メリ ッ ト に つい て の 説明 で す 。 空 欄 A 一 C を 埋め て くだ さい 。 


・| A | で 動作 する の で 、| _B | に 負荷 が 集中 し な い 
・| B | 側 か ら の レス ポン ス を 待た な いた め 、 処 理 速 度 が [| C | 
・ | D | さえ あれ は 動作 する の で 、 開 発 環境 を 構築 する 手間 が か か ら な い 


Q4 クラ イア ント サイ ドス クリ プ ト の デメ リッ ト に は どの よう な も の が あり 
ます か ? 

QB JavaScript で プロ グラ ミン グ す る と き に 最低 限 必要 な も の は な ん で す 
か ? 





ご 解答 は 巻末 に 掲載 
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HTML と は 
HTML の 書き 方 
タグ の 種類 と 使い 方 








は 人 RE IM は 3 は 柱 HH 村人 人 HH 人 HH は 人 信人 4 は 柱 柱 
朋 扶 扶 半 第 る 章 HIML 時 電電 提 提 和 章 提 提 0 提 提 提 90 提 提 拓 揚 搬 提 H 時 3 提 拓 提 提 提 半 扶持 


4 ッ 4 『 hu。W nw し 。 ま 





@ Web ペー ジ は HTML の タグ で で き て いる 欠 


ペー ジ の 実体 は 、HTML と いつ HTML フ ァイル は 、 タグ と 呼ば れる 
) で 記述 され た ファ イル で す 文字 列 (文字 の 並び ) を 使っ て 
記述 し ます 


HTML で 
記述 され た ファ イル を 
HTML フ ァイル と 言い ます 


タグ を 積み 木 の よ うに 
組み 立て て いく と … Web ペ ー ジ の で き あ が り で す 


/- 





JavaScript は 、HTML と CSS で 作ら れ た 静 的 な Web ペー ジ を 操作 し 、 動 
的 な Web ページ を 作成 する た め の 技 術 で す 。 JavaScript の 学習 に 入る 前 に 、 
ます 本 章 と 次 章 で 静 的 な Web ペ ー ジ の 作成 方 法 を 学び まし ょ う 。 
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HTML と は 





1 





Web ペー ジ の 実体 


ふだん 私 た ち が ブ ラウ ザ 上 で 見 て いる Web ペー ジ は 、 文 字 や 画像 が 見 や す 
く 配置 され 、 見 栄え 良く 装飾 され て いま す 。 し か し 実は 、Web ペ ー ジ の 実体 は 
拡張 子 「.htmll の テキ スト ファ イル で す 。 こ の ファ イル に は 文字 だ け で ペー ジ 
の 内 容 が 記述 され て お り 、 こ の 記述 に 使う の が HTML (HyperText Markup 
Language) と いう 言語 で す 。HTML で 記述 され た ファ イル の こと を HTML 
ファ イル や HTML 文書 と 呼び ます 。 

正式 名 称 の HyperText Markup Language から わか る よう に 、HTML は マー 
クア ッ プ 言語 の 1 つ で す 。 マ ー ク アッ プ 言 語 で は 、 タ イト ル や 見 出し 、 披 落 、 
筒 条 書 き な ど 文書 が 持つ 内 容 を 、 タ グ と 呼ば れる 特殊 な 文字 列 (文字 の 並び ) 
で 囲む 形式 で 記述 し ます 。 

HTML は 、Web ペ ー ジ に 表示 する 内 容 を タグ を 使っ て 記述 する マー クア ッ 
プ 言 語 で す 。 


鉛 文書 や デー タ の 内 容 (構造 ) を テキ スト ファ イル に 記述 する た め の 言 語 で 
_ す 。 主 な マー クア ッ プ 言語 と し て は HTML や XML (eXtensible Markup 
_ Language) が め ありま す 。 マ ー ク アッ プ 言 語 は プロ グラ ミン グ 言 語 で は な いこ 
と に 注目 し て くだ さい 。 マ ー ク アッ プ 言 語 は 「 文 書 や デー タ の 構造 を 記述 ( 表 
_ 現 )」 し 、 プ ログ ラミ ング 言語 は 「 パ ソコ ン に 対す る な ん ら か の 命令 を 記述 ] 
0U 計 間 。 MINOR UN 4 








言葉 だ け だ と わか り に くい の で 、 実物 を 見 て み ま し ょ う 。 次 ペー ジ の 2 つの 
画面 を 見 て くだ さい 。 左側 が HTML フ ァイル を テキ スト エディ タ (メモ 帳 ) で 
開い た 画面 、 右 側が それ を プラ ウザ で 表示 し た と き の 画 面 で す 。 ま ず HTML 
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ファ イル の 内 容 で す が 、<head> や </ head> な ど < 一 > の 部 分 が タグ で す 。 日 
本 語 の 文字 が タグ で 囲ま れ て いる (挟ま れ て いる ) の が わか り ま すね 。 タ グ の 
意味 は 後述 し ます の で 、 い ま は 気 に し な いで くだ さい 。 続い て 、 そ れ を ブラ ウ 
ザ で 表示 し た 画面 で す が 、 だ いぶ 違っ て 見 える の が わか り ま す 。 HTML で 記述 
し た タグ の 意味 や 構造 を プラ ウザ が 解釈 し 、 見 や すく 表示 し て くれ て いる の で 


|] は じ め て の HTML x 電 目 上 
を うぅ @ [file:///C:/testpage.html 


大 見 出し 


これ は 大 見 出し の 本 文 で す 。 


<IDOCTYPFE html> 

<html lang ja > 

<heady の 

<meta charset= UTF-8 > 

CE じ め て の HTML</title> 
a 


<body> 
<h1> 大 見 出し く </1> 


<p> こ れ ( は 大 見 出し の 本 文 で す 。</p> 
<h2> 中 見 出し </h2> 
< の これ は 中 晃 出 し の 本 文 で す 。 周 失 書 きも 書け ます 。</p> 


中 見 出し 


これ は 中 見 出し の 本 文 で す 。 箇 柔 書き も 書 ( け ま す 。 


e ババ ナナ 
e バイ ナッ プル 
e りん ご 





HTML ファ イル の 記述 例 HTML ファ イル を ブラ ウザ で 表示 


も と も と HTML は 、 膨 大 な 量 の 文書 を 閲覧 し や すく する 目的 で 開発 され まし 
だ 。 た だ た と えば 、 文書 の 中 に ある 専門 用 語 が 出 て きた 場合 、 そ の 専門 用 語 に つい 
て 解説 され て いる 別 の 文書 を すぐ に 参照 で きれ ば 便利 で し ょ う 。 こ れ を 可能 に 
し た の が HTML に よる リン ク で す 。 HTML に は リン ク 以 外 に も 、 文 書 を 構造 
化し た り 、 画 像 を 参照 する 役割 な ど ば が あり ます 。 

た と えば 、 右 ペー ジ の 図 の よう に 、top.html の 文字 を クリ ッ ク す る と about. 
html へ 移動 する よう に する た め に は リン ク を 使い ます 。 リ ンク に し た い 文 字 列 
を <a href=' 移 動 先 > と </a> と いう タグ で 囲む と 、Web ペ ー ジ 上 に リン ク が 


表示 され ます 。 
( 略 ) 


<p> 初 め て の 方 は <a href="about .htm1 "> この ブロ グ に つい て </a> を 読ん で くだ さい </p> 


( 略 ) 
移動 先 リン ク に し た い 文 字 列 





HTML の 内 容 _top.html about.html 


< !DOCTYPEE html> 
ma 指定 し た 場所 
<htm1 1ang="]a"> (リン ク 先 ) 


<head> RE 
<meta charget="UTF-8"> へ ジャ ンプ 
< 上 it1e>EtoD . htm1</ 上 1 上 1@> 
</head> 

<bOdY> 

<h1> よ うこ そ </hb1> 











よ つ こ 
初め て の 方 は 
この ブロ グ に つい て 













<p> 初め て の 方 は <a hrefE= 

about .htm1"> こ の ブロ グ に 
つい て </a> を 読ん で くだ さい </pz> 有朋 
</body> 『 


</htm1> | リン ク 先 の 指定 


_ 輸 5 

下線 が 引か れ た | 
青色 の 部 分 が 「 リ ンク 」 
へ ここ wedikiiisiun 


リン ツク と は 、 文 書 内 に 他 の 文書 や 画像 が な どの 











位置 情報 を 埋め 込む ここ と 。 





リン ク の 動作 イメ ー ジ 


な お 、HTML の 最新 バー ジョ ン は 5 で す 。2008 年 に HTML5 の 仕様 に つい て 
ドラ フト 版 (下書き ) が 公開 され 、2014 年 に 正式 勧告 (正式 リリ ー ス ) の 予定 
で す 。 す で に 主要 な プラ ウザ の ほとん ど が HTML5 に 対応 し て いま す の で 、 本 
書 で は この バー ジョ ン に つい て 解説 し ます 。 


p Web ペー ジ の 実体 は 、HTML と いう 言語 で 記述 され た HTML 


ファ イル で ある 。 
p HTML ファ イル は 複数 の タグ に よっ て 構成 され る 。 





_I etcid:er csr 本 ! 


Q⑳ 1 以下 は HTML の 説明 で す 。 空 欄 A と B を 適切 な 語 で 埋め て くだ さい 。 


・HTML は [| _A | を 記述 する た め の マ ー ク アッ プ 言 語 。[ A | が 持つ 内 容 を 、 
[| B | と 呼ば れる 特殊 な 文字 列 で 囲む 形式 で 記述 する 





つ 〇 解答 は 巻末 に 掲載 
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と 依 HTML の 書き 方 






HTML の 注意 点 


記述 方 法 を 学ぶ 前 に HTML を 記述 する 際 の 注意 点 を 確認 し て お きま し ょ う 。 





3 注意 点 1 HTML の タグ は 、 必 ず 半 角 英 数 字 で 記述 する 







〇 ) <head> 
x 。 ぐ head>、 ぐ head>、 く head> 
x < head>、<h ead>、<he ad> 







すべ て 全角 また は 一 部 全角 
タグ の ご こ か に スペ ー ス が ある 





タグ に 全角 文字 を 使っ た り 、 タ グ の どこ か に スペ ー ス (空白 ) を 入れ て し ま 
うと 、 プ ラウ ザ が タグ と し て 認識 で き な く な り ま す (た だ し 、 次 項 で 解説 する 
タグ の 属性 だ け は 例外 で 、 属 性 の 前 に 必ず 半角 スペ ー ス が 必要 で す )。 


4 注意 点 2 HTML は 大 文字 と 小文字 を 区 別 し な い 


つ <head> 
し ) <HEAD>、<Head>、 ぐ HeAD> すべ て 大 文字 また は 一 部 大 文字 


HTML5 は 、 英 学 の 大 文字 と 小文字 を 区 別 し な か な いため 、 ど ちら で 記述 し て も 
か まい ませ ん 。 た だ し 、 一 般 的 に は 小文字 を 利用 する こと が 多く 、 特 定 の 意味 
が あっ て 大 文字 に する も の 以外 は 小文字 で 統一 する こと を お すす めし ます 。 


%) 基本 的 な 書き 方 


で は 、HTML の 記述 方 法 を 見 て いき まし ょ う 。HTML の タグ に は さま ざま な 
種類 が あり ます が 、 記 述 方 法 は どれ も 同じ で 、Web ペ ー ジ に 表示 する コン テン 
ツ を タグ と 呼ば れる 特殊 な 文字 列 で 囲み ます 。 








ま > タグ 要素 の 記述 


< タグ 名 > 内 容 </ タ グ 名 > 


還 記 述 例 (段落 を 表わす ぐ p> 要素 ) 
<p> こ ん に ち は </p> 


「 タ グ 名 」 に は タグ の 名 称 、「 内 容 ]」 に は Web ペー ジ に 表示 する コン テン ツ が 
入り ます 。 開始 タグ と 終了 タグ で コン テン ツ を 囲 み 、 終 了 タ グ は タグ 名 の 前 に 
スラ ッシュ (/) を 記述 し ます 。 ま た 、 開 始 タ グ か ら 終 了 タ グ ま で の 全体 を 要素 
と 呼び ます 。 上 の 記述 例 で いう と 、 開 始 タ グ は <p>、 終 了 タ グ は </p> な の で 、 
<p> か ら </p> まで が 1 つの 要素 (1 段落 ) と な り ま す 。 


3 空 要素 
要素 の 種類 に よっ て は 、 終 了 タ グ が 存在 し な いも の も あり ます 。 そ の よう な 
要素 は 空 要 素 と 呼び ます 。 


ma 空 本 素 の 記述 


一 記述 例 (改行 を 表わす ぐ br> 要素 ) 


< くわ r> 


3 属性 

各種 要素 は 、 そ れ ぞ れ 異 な る 属性 を 持っ て いま す 。 属性 と は 、 有 要素 に 付け る 
付加 情報 の こと で 、 仮 に リン ク 要 素 で あれ ば リン ク 先 の URL な ど を 指定 し ま 
す 。 ま た 、 次 章 で 学ぶ CSS を 一 部 の 有 要素 に だ け 適 用 する 場合 や 、JavaScript で 
特定 の 要素 を 操作 する 場合 な びに も 、 あ ら か じ め 属 性 を 付け て お きま す 。 属性 
は 、 開 始 タ グ に 記述 し ます 。1 つ の 要素 に 対し て 複数 の 種類 の 属性 を 付け る こ 
と が 可能 で す 。 
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コ 人 か na か る みす や ャ すり y 内 WE Y お の ま ゃ 7 1 (ポイ ネツ ハ す すず オイ キャ ネネ まず w や 4 を で ザ サザ す ポポ オキ ま 義 - すす テテ BR まま まま SM で キキ ャ や すす WMw ギ ネ e 内 ォ キャ W ルポ すま ミネ ミリ WW る ナリ W を ルル WW 彼 
WNW や WNW ギ まま ポ ポ Ne NNW | ょ 。 。 OPC PW HH す 、 NN ボネ トル M デ キキ すず NNNWPmNM ま まず 4 かも WW ネネ NN ま NN ホキ A ま まま W ギ AMWWWm PF まき ポポ さす MNNWNA や WNWPNMW ま WNWNWWMWNWN ゆ TYP.W *』 る ぁ wl ル か \ W * - すず * ・ _- 6 NN を すず た 古 電導 
が be ey か の) We 「 _ WNW 和 きき 『 が | 4 4 We R 「 _- 1W ポ wW ャ MA - N WW 生ま WV WM WW 4 『 WW や 4 「 まま ィ 6 NM ゅ リア 
* " N WM 4 WWWWA4 ま MM N が タリ WWNAM まま W 還 見 浅間 生 WNW ポ ま W や JW キ 汗 ま 『 ず WWA ギ WMW そ や MM ポ MAMINWNWWA ャ WAN ポリ ボサ TE - 4 W ル n W 4 w りみ TI 
WWWWe ・ JI 
まま wY ID WNWNMW ルポ 9 WW TEEAFMINNESIN ・ まお まま 呈 。 ・ し 生 ポ 。 NN NN や N ま パネ ギ ペリ ネ 日 「 丘 当 」 WW キ WNW リポ AI 次 _ _- _- _- ボル で ずれ ルネ キャ a 
W* < @ キ JWP 間 革 * ・ 


き 届 性 の 記述 


開始 タグ 終了 タグ 
< タグ 名 属性 = " 値 "> 内 容 </ タ グ 名 > 








\ 角 スペ ー ス 


< タグ 名 属性 1=" 値 " 属性 2=" 値 "> 内 容 </ タ グ 名 > 
半角 スペ ー ス 


較 記 述 例 (リン ク を 指定 する <a> 要素 ) 
<a href="tesgt .htm1 "> こん に ち は </a> 


属性 の 前 に は 必ず 半角 スペ ー ス が 必要 で す 。 ま た 、 属 性 値 は ト ダ ブル クォート 
() の 代わ り に シン グル クォート () で 囲ん で も か まい ま 世 ん 。 た と えば 、 上 
記 の 記述 例 で いえ ば 、 開 始 タ グ は <a href=test.html> と 記述 し て も か まい ませ 
ん 。 ま た 、 属 性 の 指定 順序 に 決ま り は あり ませ ん 。 


HTML の 構成 


HTML 文書 は 、 い くつ も の 要素 を 組み 合わ せ て 構成 し ます 。 記 述 す る 際 は 、 
要素 の 中 に 別 の 要素 を 入れ 込ん で いく 構造 に し ます 。 こ の 構造 を 入れ 子 ま た は 
ネス ト と 呼び ます 。 








入れ 子 (どちら も 同じ 入れ 子 ) 


<bOd ア > <bOdy><D><a></a></p></bodY> 
<p> 
<a> 
</a> 
</p> 
</body> 


この と き に 注意 し な けれ ば な ら な い の は 、 終 了 タ グ の 位置 で す 。 
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良い 例 
<d1 で ><p> こ ご こんにちは </p></d1 は Y> 
Se 


悪い 例 
<div><p> こ ん に ち は </d ミ ></p> 





タグ が 交差 する よう に 配置 し て は いけ ませ ん 。 必ず 要素 の 外側 を 包む よう に 
別 の 要素 を 配置 し ます 。 


p WebD ペ ー ジ の コン テン ツ を 開始 タグ と 終了 タグ で 囲む 。 
p 開始 タグ か ら 終 了 タ グ ま で の 全体 を 要素 と 呼ぶ 。 
p 空 要素 と いう 終了 タグ が な い 有 要素 も ある 。 


p 要素 に は 属性 と いう 付加 情報 を 指定 で きる 。 属性 の 前 に は 半角 スペ ー ス 
が 必要 。 


ぁ 複数 の タグ を 組み 合わ せ て 使う 場合 、 別 の タグ と 交差 し な いよ う 
必ず 入れ 子 で 記述 する 。 


還 6heck 更 est 


Q 1 以下 は タグ の 説明 で す 。 空欄 A 一 C を 適切 な 語 で 埋め て くだ さい 。 
・ タ グ は [  A | と [| B | の 2 種類 の 記号 で 構成 され る 文字 列 。 開 始 タ グ か ら 終 了 タ グ ま 
で の 全体 を | C | と 呼ぶ 


る ⑳ ネス ト と は な ん で すか ? 





解答 は 巻末 に 掲載 
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< 角 HTML の 作成 と 表示 






簡単 な HTML を 作ろ う 


それ で は 、 実 際 に HTML フ ァイル を 作成 し 、 ブ プラ ウザ で 表示 し て み ま し ょ 
う 。 HTML や TavaScript の よう な クラ イア ント サイ ド の 技術 し か 利用 し て いな 
い 場 合 、 実 際 に イン ター ネッ ト 上 に ペー ジ を 公開 し な く て も 、 ロ ー カ ル PC ( 個 
人 の パソ コン ) 上 で 実行 結果 を 確認 で きま す 。 次 の 手順 に 従っ て 実行 し て みて 
くだ さい 。 





手順 1 HTML の 記述 
テキ スト エディ タ に リス ト 21 の ソー スコ ー ド を 入力 し ます 。 リ スト 内 の 。 


は 、 半 角 ス ペー ス を 表わし ます 。 


リス ト ら .1 最低 限 の タグ で 構成 され た HTML (list2_1.html) 






< !DOCTYPBE html> 
<htm1 1and="]a"> 

<head> 

<me ヒ 上 a Char8eG キ ="『u 人 上 F-8『> 
< 上 1 上 1e>HTML の 練習 </ モ 上 1t 上 1e> 
</head> 

いく DOdY> 

uu」 こ ん に ち は 

</body> 

</htm1] > 


【 ソ ー ス コー ド 】 0 WM 大須 
兄 


ソー ス は 「 元 と な る も の 」、 コ ー ド は 「 命 令 文 」 を 意味 し ます 。 こ こ で は 、「Web 
ペー ジ の 元 と な っ て いる 命令 文 ] と いう 意味 で 使っ て いま す 。「 ソ ー ス 」 と 「 コ ー 
_ ド 」 は それ ぞ れ 単独 で 使う 場合 も わ ち ありま す 。 コ ー ド 、 プ ログ ラム 、 ス クリ プ ト 
は 同義 語 と し て 使わ れ ま す 。 

























HTML を 見 や す 
くす る た め 、 半 
角 ス ペー ス を 入 
力 し て 字 下 げ 











ちな み に 、 以 下 は メモ 帳 で 入力 を 終え た 状態 で す 。 タ グ は すべ て 半角 文字 で 
入力 し 、 ア ルフ ァ ベ ッ ト の つづ り に 間違い が な いか 注意 し て くだ さい 。 


「 人 XX 
LN | 


アイ ル (F) 編集 (E) 書式 (O) 表示 (V) ヘル プ (H) 





<!DOCTYPE html> 
tml langs ja コー ド を 見 や すく する た め の 
NOT の tty4200RIS13 
ao ' _ す 。 イ ン デ ント は 、Web ペ ー ジ の 
と ュ 表示 に 影響 し ませ ん 。 イ ン デ ント 
bo は 、 タ ブ ま た は 半角 nA 不 符 
な っ て くだ さい 。 





メモ 帳 で HTML を 入力 


選手 順 2 ファ イル の 保存 

HTML フ ァイル と し て 保存 し ます 。 メ モ 帳 の 場合 は 、[ フ ァイル (F)] メ 
ニュ ー か ら 「[ 名 前 を 付け て 保存 (A)…] を クリ ッ ク し 、「 名 前 を 付け て 保存 」 ダ 
イア ログ で 保存 し ます 。 保 存する 際 の 注意 点 と し て 、 テ キス ト エ ディ タ で ファ 
イル の 文字 コー ド を 「UTF-8」 に する 必要 が あり ます 。 フ ァイル 名 は 「list2_1. 
htmll と 入力 し ます 。 
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HTML5 で は 、 文 字 コ ゴー ド に UTF-8 を 使う こと が 推奨 され て いま す 。HTML 
ファ イル を 保存 する と き に は 、 文 字 コ ー ド を 必ず UTF-8 に 指定 する の を 忘れ な 
いよ うに し まし ょ う 。UTF-8 以 外 の 文字 コー ド で 保存 する と 「 文 字 化け 」 の 原 
因 と な る た め 、 注 意 し て くだ さい 。 ! 

また 、HTML の ファ イル 名 に は 、 半 角 の 英 数 字 、 人 ルイ フン (-)、 ア ンダ ー ス コア 
(_) の み の 使用 が 推奨 され ます 。 


ファ イル の 保存 場所 は どこ で も か まい ませ ん が 、 こ こ で は C ド ライ ブ の 直下 
に あら か じ め work と いう フォ ル ダ を 作成 し 、 そ こ へ 保存 し まし ょ う 。 [保存 ] 
ボタ ン を クリ ッ ク す る と 、 フ ァイル が 保存 され ます 。 


(で) *。*・ 人 舞 < ロー カル テディ スク (C:) > work v C work の 検索 の 


2 お 気に入り A^ 名 前 更新 日 時 種類 
1 ーーーー hUml 2013/02/.… HTML デイ ル 
哨 ラブ サカ | 26337627.。 HTML ファ イル 


0 作 
> 個 の 項目 1 価 の 項目 を 選択 2 


HTML ファ イル を C:\work に 保存 


手順 3 ファ イル を ブラ ウザ で 表示 

HTML フ ァイル を ダブ ルク リッ ク す れ ば 、 既 定 の ブラ ウザ が 起動 し ます 。 拡 
張子 「.htmll が プラ ウザ に 関連 付け る され て いな い 場 合 は 、 次 の よう に HTML 
ファ イル を プラ ウザ の アイ コン (ショ ー ト カッ ト ) の 上 に ドラ ッ グ し ます 。 す 
で に ブラ ウザ が 開い て いる 場合 は 、 プ ラウ ザ の 上 に ドラ ッ グ する の で も か まい 
ませ ん 。 








SS。_〔 。 直 還 
上 証 雪 Google Chrome で 開く 





ファ イル を ブラ ウザ の アイ コン に ドラ ッ グ ファ イル を ブラ ウザ 上 に ドラ ッ グ 





ブラ ウザ に HTML フ ァイル が 表示 され た で し ょ うか ? Chrome で の 表示 結 
果 は 次 の と お り で す 。 


画 実 行 結果 





ふ 人 自 fle:///C:/work/list2_1. html ーー 


ーー マーー…ーーーーーーーー ーーーーー ーー ツー ツー ーー ペー の 





2) タグ の 意味 


、 記 述 し た 各 タ グ の 意味 に つい て 確認 し まし ょ う 。 








< !DOCTYPE htm1l> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーー 電 條 
<htm1 1ang="]&"> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー を を 》 
<head> 一 一 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 一 一 覧 》 
<me ヒ a Cha エ ge 上 =“u 人 上 8> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー《 

< 上 4 も 1e>HTML の 練習 </ て も 1t1e> 一 一 ーーーーーーーーーーーーーーーーーーーーーー 


</head> 

<body> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー》 
こん に ち は 

</body> 

</htm1 > 


⑳ <!DOCTYPE htm|> 
HTML5 で 記述 され た 文書 で ある こと を 表わす タグ 。 終了 タグ は あり ませ ん 。 
の < く html lang= "ja "> 
HTML 文書 で ある こと を 表わす く html> タグ 。 文書 全体 を この タグ で 囲み 
ます 。lang 属 性 は 使用 する 自然 言語 (日 本 語 や 英語 な ど ) を 指定 し ます 。 日 
本 語 の 場合 、 属 性 値 は |jal」 で す 。 
《) く head> 
文書 全体 に 関す る 情報 を 定義 する く head> タグ 。 こ の タグ 自体 は あま り 意 
味 を 持た ず 、 中 に 入れ 子 に し て 記述 する タグ が さま ざま な 意味 を 持ち ます 。 
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。。。 。 生還 生還 デ 和 還 還 還 答 ''a ぺ ヲ yi\※v※'qiil ネ や 75 や え や ええ エミ キミ ミワ ジワ ヤミ や II WIIPYPPE'T の PCE SW UTU そ YYM USS2MUWUEARAMWUAAEKSAUUAAASAIALAILYYJNEASS ま 00 まき まき も 邊 各 は まあ ルイ す ま まだ 湯 あ まん も 衣 あま まき すもも も 4 いひ ゅ る iuybUJMMLSebkk は る おい ルル みる や あさみ 
1.111 1 1 151 ) ) pp デ /. 較 了 | まま Myiwy か rt の かり で ヤヤ すす や iPW YY で や WTWWE YY ED AOLAUUIMLADAAAAMMDAUAAUAM4au(L 人 Myiu0Mvikyyb が ゆあ あゆ 條 が 人 buy ゆ 0yG の ル ル ルポ サル ひ ルル ル 少 ひひ の 0 の ルル ルル リル の ルル も の サル いかり rkit0 か ル ザ 
III ん ei | ed '』I 的 思 せい せり の ヤル さい サ で ゆり りや か な かかり TO AWKKKYIITUT WWWWMWWW MM WW ず WWWNWWWWNWWWI オ ポポ や MA か り けず を サ か りり WW り ササ YWP の YY りす YY 人 OO や WTYDPDO ひ の rt の 7PWPCD 0 
RE ロロ に 0 だ ささ 生還 3 挟 引 引 | | 者 4 ( | ご NNW ば のり で ササ YWUVYTOWUTWWWWTY0OYILSMIIALALALAALAMMMLULL まま あし ALA AL あま も も よん ルル の ルル ああ ゆみ wePPwWWAAWwNWDMWMWNWWMWaWWW を LMWNWNNWNWNWWNWWPWPYTNWAWMTWYMWNWPPTNYNANWTWNWW 和 WW か 衝 ザ 
ルネ ポ W WWWNEP WWwWmNWiwWwewdiWm キ が WWWWWAMW ま W キ NL も LNWWMNN も ネネ さ ポ や ザヤ NLNWNWTWNNMPNWNNNKWTTNWTNMN WNW ポ RMWTWWNWI ま や WWWMNMmWNWWAM WWw wwnWWKNWOWNNWWMUAWWWNWPWNNWNINVWNWNWNNWMWNWWMNWYN WWIWWMWW ょ HHWNWWNWMNWTNNWWANMNN や WNWTNWWWWWWNNANWWWNNY 


ぐ <meta charset="utf8"> 
文書 の 文字 コー ド を 指定 する く meta> タグ 。 こ こ で 指定 し た 文字 コー ド と 
HTML フ ァイル を 保存 する と き に 指定 し た 文字 コー ド が 異な る 場合 、 文 字 化 
けが 発生 し て し まう の で 気 を つけ まし ょ う 。 





⑥⑬ く title> 
文書 の タイ トル を 定義 する < く title> タグ 。 プ ブラ ウザ で 表示 し た と き に 、 タ プ 
に 表示 され る 文字 列 と な り ま す 。 

⑥⑬< く body> 
本 文 を 表わす < く body> タグ 。Web ペ ー ジ 上 に 表示 する 文字 列 を 記述 し ま 
す 。 


これ ら は 、HTML の 最低 限 の タグ で す 。 <body> 要素 の 中 に 文書 (Web ペー 
ジ ) の 本 文 を 記述 し て いき ます 。 こ の 要素 の 中 に 入れ 子 で きま ざま な タグ を 記 
述 で きま す が 、 こ れ に つい て は 次 節 で 見 て いき ます 。 


p コー ド を 見 や すく する た め に イン デン ト ( 字 下 げ ) を 使う 。 
p HTML ファ イル は 文字 コー ド を UTF-8 に し て 保存 する 。 


_W HeTigdtee に ) 貴 くい 


⑳ 1 HTML 文書 全体 を 囲む タグ は な ん で すか ? 
Q 文字 コー ド を 指定 する た め に <meta> タグ に 付け る 属性 は な ん で すか ? 





の 解答 は 巻末 に 掲載 
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<body> 要素 の 中 に 記述 する 要素 


前 節 で は 、HTML を 構成 する 最低 限 の タグ を 紹介 し まし た 。 こ の 他 に も 
HTML に は さま ざま な タグ が 用 意 き れ て いま す が 、 そ れ ら の ほとん ど が 文書 の 
本 文 を 表わす <body> 要素 の 中 に 記述 する タグ で す 。 非 常に 多く の タグ と 属性 
が ある た め 、 主 要 な も の を 以下 に まとめ ます 。 す べ て を お ぼ え る 必要 は あり ま 
せん が 、 そ の 使い 方 と 組み 合わ せ 方 を ざっ と 把握 し て お きま し ょ う 。 


K3 終了 タグ の ある タグ 
説明 属性 


見 出し を 定義 する 。h1 ~ h6 まで あり 、h1 が 最も 高 レ ベル で 、h6 が 最も 低 レ 
ベル な 見 出し 


<h1> 見 出し </h1> 
文章 の 段落 を 定義 する 


定義 し ます 。 
</p> 
特に 意味 を 持た な い タ グ 。 複数 の タグ を まとめ て 扱う と き に 使う 


<h1> 見 出し </h1 > 


<p> 段 落 </p> 


リン ク を 定義 する 
Y <a> タグ が 持つ 属性 
属性 名 に か 当 が ま 


リン ク 先 の URL を 指定 する 


リン ク 先 を どの よう に 表示 する か を 指定 する 。 指 定 値 は 以下 
target _blank 新しく タブ を 開く 
_Self (既定 値 ) 現在 の タブ に 表示 する 


<a hrefs'index .htm1" target=" blank">TOP へ </a> 
ボタ ン を 定義 する 
<button> ボ タン </Du 上 上 On> 
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AULSULNA ま ええ ELLISKA&AAULIkIOMuky も hh も 0 のみ みい Sh も bt 人 か ひひ WMb を Sh も 小さ すか で すま AEDAIUNOSAJLL ま まお た た 

rt いす DU 」 4 MMWWY ポ WWNNMW キ 部 N ず すず 東 林 ポ WW すす WY 下 生ま すず キル ル W ド すず ず WNWWAN キ WNW ナ WNW ず NNW ヤ キキ MA ボナ ャ NN まま YWWANP す ャ パャ ツネ 1WWM ま YE も まま オ ザ ポ パパ ま NNNVNWNWN ま か が ヤキ ネガ WMNNYAS で NNW ポル キキ トモ 征 六 和 mW 弄 
1 . 1 『 

すい まき きま まぜ 】 wwAwwt4AWLWWAWWWWWWWWPWAAWNNYWMAMNW や WNWNATWWNMMN や WWANWPVNWWWNWANNWNWNWWWWMMNTWWANW や や WWW ま YWtWNPWNWNMNM YUMIMVUVTTTT か で で FODO 人 ササ PTWDWWWUr イ rrVrr ク rr は 。 

は は 1 NN AS AM 、/( YREMGNME th 24444049Y0729400420 も 人 YYYY い か 4 季 科 は 049239474 か 人 KAY 人 HTMEAYY 4 


終了 タグ の な い タ グ ( 空 要素 ) 


ルー 


画像 を 参照 する 
マ <img> タグ が 持つ 属性 
属性 名 指定 内 容 
Sr「C 画像 の 参照 先 を 指定 する 
画像 が な ん ら か の 理由 で 表示 で き な か っ た 場合 に 、 画 像 の 代わ り に 表示 
画像 の 幅 を 指定 する 。 指 定 で きる 単位 は CSS の width と 同じ 


















する 文字 列 を 指定 する 
Me (60 ペー ジ ) 


画像 の っ 高 さ を 指定 する 。 指 定 で きる 単位 は CSS の height と 同じ 
(60 ペー ジ ) 
<1mg 8rcs"f]1ower.]pg' a1t=" 花 ! widths"300px" helghts"200px リ > 


TH 
に つっ ッ 0 0 章介 WW 
NN 
oo MO 


height 





3 すべ て の タグ に 付け られ る 属性 
説明 


属性 名 
MM 要素 を 識別 する た め の ID。 文 書 内 で 重複 する 値 を 指定 する こと は で き な い 


<diy 1d="header">…</d も 1 マ > 


CSS の クラ ス 名 を 指定 する (63 ペー ジ ) 
Class 
<diy cl1agg= "container ">…</d ミ も マ > 





以上 、<body> 要素 の 中 に 記述 する 主要 な タグ に つい て まとめ まし た 。 続い 
て 、 こ れ ら の 中 で も 特に 頻繁 に 使わ れる リン ク と 画像 の 表示 に つい て 、 実 例 を 
見 な が ら 詳 し い 使 い 方 を 学び まし ょ う 。 


9) リン ク の 利用 


リン ク は 、 あ る Web ペー ジ か ら 別 の Web ページ へ 移動 する 機能 で す 。 








ss リン ク の 記述 


<a href= リ リン ク 先 URL"> リ ンク 文字 列 </a> 
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「 リ ンク 先 URL」 の 指定 方 法 に は 、 絶 対 パ ス 指 定 と 相対 パス 指定 の 2 通り が 
あり ます 。 


A さ ん が B さ ん の 家 へ 移動 する 場合 に た と える と ・・・ 


ご どこから 見 て も 同じ 場所 を 目 分 が いる 場所 か ら 見 た 
指定 する 方 法 相対 位置 を 指定 する 方 法 









東京 都 文 京 区 本 郷 
2-15-13-11 の 家 へ 





NOW MM NOM 者 語 NEAR 人 AND 6 本 DO AGAIN AA 
A さ ん の 家 B さん の 家 A さ ん の 家 B さん の 家 
東京 都 文京 区 本 郷 東京 都 文 京 区 本 郷 東京 都 文 京 区 本 卿 東京 都 文 京 区 本 郷 
2-15-13-10 2-15-13-11 2-15-13-10 2-15-13-11 


絶対 パス と 相対 バス の イメ ー ジ 


3 絶対 バス 指定 
絶対 パス は フル パス と も 呼び ます 。|http://]」 か ら 始 まる URL を すべ て 記述 


する 方 法 で す 。 目 分 の Web サ イト か ら 別 の Web サ イト へ 移動 する 場合 は 、 こ 
の 指定 方 法 を 使い ます 。 


リス ト 2 ら .2 リン ク の 表示 (絶対 バス 指定 ) 


< !DOCTYPE htm1l> 

<htm] 1and="]a"> 

<head> 
<me ヒ a Char8et="utEF-8『> 
<t 上 it 上 1e>HTMTL の 練習 </ 上 1 上 1e> 


</head> 
< くわ DOdY> 
<a href= "htD : / / www .doog1e . Co. Jp/ "> グー グル ハム 移動 </a> 
</body> 
</htm1 > 
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を と っ う @G DDfle: 7//C: :/work/list2_ 2.html_ ーー _ 
クー クル へ 移動 


リン ク を クリ ッ ク 


hn 析 
3 |) www.google.co.jp 


尿 も 


Goocle 


日 本 


Goooie 愉 策 Fm FeelinO Lgcky 





w 
< 和 湊 給 MNONNMNBNNISNONBNNMMNNSMNIDNONUONNNNSARMNMRSS > 





3 相対 バス 指定 

現在 の Web ペ ー ジ か ら 見 た 、 対 象 ペ ー ジ まで の 位置 を 指定 する 方 法 で す 。 
自分 の Web サ イト 内 の 別 の Web ペ ー ジ へ 移動 する 際 に 使用 し ます 。 相対 パス 
を 指定 する 場合 、 記 述 方 法 に 次 の ルー ル が あり ます 。 


ルー ル 1 同一 ディ レク トリ 内 の Web ペ ー ジ に 移動 する 場合 は ファ イル 名 
の 指定 だ け で 良い 。 

ルー ル 2 ディ レク トリ の 中 を 表わす に は 、 デ ィ レ クト リ 名 の 後ろ に スラ ッ 
シュ を 付け る 。 

ルー ル 3 1 つ 上 の ディ レク トリ は .. と いう 記号 で 表わす 。 


ま 基 【 バ ス 、 ディ レク トリ ) 0 誠 


欠 。 バス は ファ イル が 配置 され て いる 場所 、 デ ィ レ クト リ は サー バー 上 に 存在 する 
ツウ オル ダ の ご こと だ さ 。 
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具体 例 を 見 て み ま し ょ う 。 た と えば 、 次 の よう な ディ レク トリ 構成 の Web サ 
イト が ある と し ます 。 








Web サ イト | 


』 い い r 本 
間 ュ ッ プペ ー:> . 衣 
DOOR 


8 


main.html 





note1.html 


0 


note2.html 





map.html 
ディ レク トリ 階層 図 


この 場合 、 次 の よう に リン ク 先 URL を 指定 で きま す 。 





maphtml info/map.html 


相対 パス 指定 は 、 画 像 ファ イル を 指定 する 際 に も よく 使い ます 。 次 項 で 説明 
する 画像 の 表示 の 記述 例 で 相対 パス 指定 を 使用 し て いま す の で 、 記 述 例 は そ ち 
ら を 参照 し て くだ さい 。 
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y 対 バス は 、Web ペ ー ジ か ら 他 の Web サ イト へ 移動 する と き に 使う 。 


p 相対 バス は 、 自 分 の Web サ イト 内 で の ペー ジ 移 動 や 画像 の 指定 な ど 
に 使う 。 








mm 


Web ペ ー ジ 上 に 画像 を 表示 する た め に は 、HTML フ ァイル か ら 画 像 ファ イ 
ル を 参照 する よう タグ で 指定 し ます 。 画像 の URL は リン ク と 同様 、 絶 対 パス ま 
た は 相対 パス で 指定 し ます 。 





as リリ ンク の 記述 


<1mq gro= リ 画像 の URL "> 


例 と し て 、 次 の よう に images デ ィ レ クト リ の 中 の frog1.jpg と いう 写真 デー 
タ を Web ペ ー ジ に 表示 する 場合 を 考え て み ま し ょ う 。 


frog1.jDg 


liSt26_ 3.html か ら images ディ レク トリ の 写真 デー タ を 参照 する 


この 場合 、 リ スト 2.3 の よう な 相対 パス 指定 を 行なう 必要 が あり ます 。 





リス ト ら .3 画像 の 表示 (相対 バス 指定 ) 


< !DOCTYPE htm1l> 
<htm1 1and="]a"> 

<head> 

<meta Char8e キ 上 ="u 上 EE-8『> 

< 上 it1e>HTML の 練習 </ 上 1 上 1e> 
</head> 

< わ Od ア > 

<1mq 8Bro="1made8/ Frod1 . DPd "> 
</bodY> 

</htm1> 





実 行 結果 
| ] HTML の 練習 1 
と っ 円 le77C7 EE ro mm ニー ンー 





少 タ ファ イル や ディ レク トリ の 名 前 


HTML/CSS/JavaScript で 扱う ファ イル (画像 や CSS/JavaScript ファ イル 
な ど ) や ディ レク トリ の 名 前 に は 、 半 角 の 英 数 字 、 人 ルイ フン (-)、 ア ンダ ー ス コ 
ア ( ) の み の 使用 が 推奨 され ます 。 


ンー て 還 ン 
トチ プ 
ae 放 





_I HeTcigd:e Mc に 1 暗 /・ 


Q 1 リン ク を 定義 むせ る タグ の 名 称 は な ん で すか ? 
2 る <img> タグ に 付け る 画像 の 参照 先 を 表わす 属性 の 名 称 は な ん で すか が? 





つ 〇 解答 は 巻末 に 掲載 
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⑳)) 複数 組み 合わ せ て 1 つの 部 品 を 生成 する タグ 





入力 机 や ヤ ボ タン な ど 、Web ペ ー ジ の 一 部 分 を 形成 する HTML 要 素 を 部 品 と 
呼び ます 。 複数 の タグ を 組み 合わ せる こと で 、1 つ の 部 品 を 表わす 特殊 な タグ 
が いく つか あり ます 。 よ く 使 われ る の が リス ト 、 セ レク ト ボ ックス 、 テ ー ブ プ ブル 、 
フォ ー ム で す 。 これ ら の 使い 方 を 見 て いき まし ょ う 。 


⑨ 


リス ト は 、 和 複数 の 項目 を まとめ て 管理 し ます 。 メ ニュ ー 表 や 画像 の 一 覧 を 表 
示す る 際 な ど に 利用 きれ ます 。 


Pie 順序 の な い リス Ye 


Oo| | 順序 の ある リス ト 全 体 を 囲む 


Fi” 。 。 | リスト 内 の 項目 を 定義 する 


これ ら の タグ を 使っ て 、 次 の よう な リス ト を 表示 し て み ま し ょ う 。 
















u1 /o1 





リス ト の 構成 イメ ー ジ 


リス ト 2.4 で は 、3 件 の 項目 を 持つ リス ト を 順序 な し で 表示 し て いま す 。 





リス ト ら .4 順序 な し リス ト の 表示 


< !DOCTYPE htm ユ > 
<htm1] 1anq="]a"> 
<head> 
<meta Char8e ヒ ="u 上 F-8『> 
< 上 1 上 1e>HTMTL の 練習 < / モ 1t 上 1e> 
</head> 
< わ Od ア > 
くい 十 > 
<]11> オ オ サ ン ショ ウ ウ オ </11> 
<11> っ メキ シコ サ ラマ ンダ ー</1 せ > 
<11> マ ル メ タビ ピオ カ ガ エ ル </11> 
</u1> 
</body> 
</htm1 > 





一 実行 結果 順序 な し 





[HTML の 練習 2 
を うお G 口 file:///C:/work/list2_4.html 
。 オオ サン ショ ウ ウ オ 


ゃ メキ シコ サラ マン ダー 
e マル メタ ビオ カ ガ エ ル 





リス ト 24 の <ul></ul> を 、<ol></ol> (順序 あり リス ト ) に 変更 する と 、 次 
の よう に な り ま す 。 


還 実 行 結果 順序 あり 


| HTML の 練習 
を う 3 G 口 file:///C:/work/list2-4Ahtm| 。 | 


ITPEETTRTTERTPPETEET ーー ズー こい ー ツ ーー た ーー ニー ペーーーーー ニ ーーーーーーーー バ ーーーーーーー ペ ーー バー ペペ ーーー ペ ーー ニーーー バ ーー ペーーー* ニ ーー ペー ト ー ト さ ト ーー ニット ニー eee マ ee ニー ンマ と と mr て マー 


1 オオ サン ショ ウ ウ オ 


2 メキ シコ サラ マン ダー 
3. マル メタ ビオ カ ガ エ ル 
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ae Au ueeasawiu 
か い 当 上ル も 人 ル 十 9en II で ッ WWN ま か まま ポポ イル WYWW ま WNW も ルポ ANYNNtT キ キャ ォ ポ ル # ネ WWY 上 % す や MNTmW ネ きよ や す WJNW ッ デ W W キ や JWN まや JW ルル W 4 ん 4 ド NY や We 本 ゃ W FMWWNW#HNWY や NANAPTWY MWTW ギ ギ WWAA ず WV や まま ず ザ PWRNNNW や WANM キ パト 4 キザ キャ も も も KW だ WV\ ぜ ま W マ 
人 二 電 全 OTLANDT 0 4 W | | ( 叶 還 二 末 科 昌 WW を WW WW や WWWtvAWWWYAWASWWWMWNWWWMAAMWWWWW ホ を WT や WNWWWW や WNWWW や WPMNWW WAYWwwWPW や NNWAMWN wwWAAWMWWWMWwwWweWWWWAWNWNeeanrw UKK が ん まま まり し し いま いい 
ーー ジー の だ ル だ る 許 】jV の NAND か ttWVytT 人 WAS 人 前作 か かい いせ と ル rt か WWWWtUY か Tp ササ かり か か Wh6 介 叶 ht の YY 
WAY WW 生み 1( 公主 
EE や 
Fa 


テー ブル は 、 デ ー タ を 表 形 式 で 管理 し ます 。Web ペ ー ジ に Excel で 作成 し た 
よう な 表 を 表示 する 場合 に 利用 し ます 。 











説明 





テー ブル の 構成 イメ ー ジ 


リス ト 25 で は 、3 列 、4 行 (うち 見 出し 1 行 ) の テー ブル を 表示 し て いま す 。 


リス ト 2.5 テー ブル の 表示 


< !DOCTYPE htm1]> 

<htm] 1anqd="]a"『> 

<head> 
<meta Char8e ヒ 上 = "uu 上 F-8『> 
<t 上 1t1e>HTML の 練習 </ モ 1t 上 1e> 


</head> 
<DOd> 
<t 上 ab1@e> 
くも どら ゥ 
< 上 th> 分 類 < / th> 
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<th> 和 名 </t 上 h> 
<th> 別 名 </ 上 h> 
</ 上 > 
< 七 エ > 
<td> 有 尾目 オオ サン ショ ウ ウ オ 科 < / td> 
<td> オ オ サ ン ショ ウ ウ オ </td> 
<t 上 d> ハ ン ザ キ </ て td> 
</ 上 エ > 
し る か 
<td> 有 尾目 トラ フサ ン シ ョ ウ ウオ 科 </ td> 
< も Ed> メ キシ コ サ ラ マン ダー</tQ> 
< 上 > ウー パー ルー パー</ て td> 
</ 上 > 
< 七 > 
<td> 無 尾目 ユビ ナガ ガエル 科 < / td> 
<td> マ ル メ タビ オカ ガエル </ td> 
<td> バ ジェ ッ ト フ ロッ グ </ て td> 
の が 記 か 
</tab1e> 
</body> 
</htm1> 








画 実 行 結果 


遼 | HTML の 練 吾 寺井 
を っ C fle:///C:/work/list2_5.html 


本 ーーーーーーー ーー バー ペーー =ーーーーーーーーー い ーーーーーー ニ ーー ペー ーーーーーーーーーー ーーー…… 


分 類 和 名 別名 


有 尾 目 オ オ サ ン ショ ウ ウ オ 科 オオ サン ショ ウ ウ オ ハン ザキ 
有 尾 目 ト ラフ サン ショ ウ ウ オ 科 メキ シコ サラ マン ダー ウー パー ルー パー 
無 尾目 ユビ ナガ ガエル 科 マル メタ ビオ カ ガ エ ル パジェット フロ ッ グ 








⑨ フー ム 


フォ ー ム と は 、 文字 を 入力 する テキ スト ボッ クス 送信 ボタ ン な ど 、 ユ ー 
ザー に 情報 を 人 人力 さ せる た め の 部 品 を まとめ た も の の こと で す 。 ショッ ピン グ 
サイ ト で よく 見 られ る 、 ユ ー ザ ー の 個人 情報 を 人力 する ペー ジ な ど は フォ ー ム 
で 作ら れ て いま す 。 
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品 登録 オー ム XX 絆 拉 
本 | hocchs oojp/npudom.hd 識 


登録 フォ ー ム 


間 郎 。 
1790075 


東京 都 和 町 5 この 領域 全体 を 
ーーー ( 「 フ ォ ー ム 」 と 呼ぶ 








03.5362.000 | 
Yes 


| 送 信 | | リア | 


フォ ー ム は さま ざま か な 入力 部 品 を まとめ る た め の 領 域 





フォ ー ム 内 の 送信 ボタ ン が クリ ッ ク さ れる と 、 人 入力 され た デー タ が サー パー 
に 送ら れ ま す 。 こ の と き 送 信 き れる デー タ を リク エス ト パ ラ メー タ と 呼び ま 
す 。 リ クエ スト パラ メー タ は 、 サ ー バ ー サ イド スク リプ ト が 受け 取り 、 デ ー タ 
ベー ス へ の 登録 処理 な ど を 行ない ます 。 

まず 、 フ ォ ー ム 関連 の タグ を 以下 に まとめ ます 。 


ンク ルー 説明 


フォ ー ム 全体 を 囲む 
Y form タ グ が 持つ 属性 


属性 名 指定 内 容 


309500800000BNGNNGESDR ご 
[eoton | 間 の URL を 拓 計 る 7.70〈. パ 7.〈0〈.〈0「 


フォ ー ム の 入力 デー タ (パラ メー タ ) を どの よう に 送信 する か を 指定 する 。 
指定 値 は 以下 
method | get URL の 後ろ に パラ メー タ を 付加 する 
送信 先 URL? パ ラメ ー タ 名 1= 値 を パラ メー タ 名 2= 値 … 
poSt パラ メー タ を 隠し て 送信 する 


( 過 <Eorm name='"edit" aotion="entry.Dphp" method= り DO8t"> 


</ Eorm> 
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K3 フォ ー ム の 中 に 記述 する タグ 







テキ スト ボッ クス (入力 欄 ) や オプ ショ ン ボ タン (ラジ オ ボ タ ン ) な どの 、 入 力 部 品 を 

定義 する 

マ < く input> タグ が 持つ 属性 
属性 名 に か が し 


name | サー バー に 送ら れる 名 前 
要素 が 持つ 値 。 ユ ー ザ ー に よる 入力 値 
Input |Iype | 部 品 の 種類 を 指定 する 


時 チェ ッ ク ボ ックス や オプ ショ ン ボ タン が 選択 状態 に ある こと を 表わす 。 属 
性 名 の み を 指定 し 、 値 は 記述 し な い 
要素 が 使用 可能 な 状態 で ある こと を 表わす 。 属 性 名 の み を 指定 し 、 値 は 記 
enabled 6 
述 し な い 
AAL 要素 が 使用 不可 能 な 状態 で ある こと を 表わす 。 属 性 名 の み を 指定 し 、 値 は 
記述 し な い 
人 急 <1nput type="radio" name="man" ya1ue="1" cheoked> 


入力 部 品 の 項目 名 を 定義 する 
<1abe1 > 氏名 <1nput type="text! name="uSername"></1abe1 > 


K3 <input> 要素 の type 属性 に 指定 で きる 値 の 一 覧 





































種類 説明 


値 
テキ スト ボッ クス | 文字 を 入力 する た め の 部 品 2 
type デ "checkbox" 」 チェ ッ ク ボ ックス 複数 選択 可能 な 部 品 


オプ ショ ン ボ タン | 年 の み 選択 可能 な 部 品 


ID9 王 faOIO7 (ラジ オ ボ タ ン ) 
Web ベー ジ 上 に は 表示 され な い 部 
type="hidden' | 隠し フィール ド | 品 。 ス クリ プ ト で 使う デー タ を 保持 
し て お きた り い 場 合 な ど に 使う 


脱 抽 ) クリ ッ ク す る と フォ ー ム 内 の 入力 
type デ "submit 送信 ボタ ン デー タ が 送信 され る 
ON 。、/。、 | クリッ ク ず る と フォ ー ム 内 の 入力 
type デ "reSet リセ ッ ト ボ タン デー タ が すべ て クリ ア さ れる 
ク 


リッ ク し て も 何 も 起 こら な い ボ タ 


UL AM ン 。 スク リプ ト を 設定 し て 使う 





次 の 図 は 、 フ ォ ー ム の 一 般 的 な 利用 イメ ー ジ で す 。 ユ ー ザ ー が フォ ー ム で 人 
力 し た 情報 は 、 リ クエ スト パラ メー タ と し て サー バー へ 送信 きれ ます 。 
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送信 する 内 容 





ーー 


送信 ボタ ン が クリ ッ ク さ れる と 、 
サー バー に リク エズ ト 
バラ メー タ が 送ら れる 














リク エス ト パ ラ メー タ は 、 
名 前 (name 属性 値 ) が 付け られ た 入れ 物 。 
中 に は 、 送信 デー タ (value 属性 値 ) が 入っ て いる 







テキ スト ボッ クス の 場合 、Value 属性 値 に は 「 
ユー ザー が 入力 し た 文字 列 が 自動 的 に セッ ト さ れる 





フォ ー ム の 利用 イメ ー ジ 


リス ト 26 は 、 単 純 な 入力 フォ ー ム を 定義 し た 例 で す 。 


リス ト ら .6 フォ ー ム の 表示 


<!DOCTYPE html]> 
<htm1] 1]1and="]a"> 
<head> 
<met ヒ a Char8e ヒ ="u 上 正 -8『> 
<t 上 it 上 1e>HTML の 練習 < / 上 1t 上 1e> 
</head> 
<DOd> 
< 上 FOO エ m> 
<1abe1> 氏 名 <1nput type= " 革 ex 七 " name="uSername "></1abe1 > 
<D エ > 
<1abe1 > 性別 
<1nput type= "rad1o" name= "dender' va1ue="1! cheoked> 男 
<1nput type= "radio" name= "dender" ya1ue= "2 リ "> 女 
</1abe1 > 
<D エ > 
<1abe1 > 趣味 
<1nput type= "Checkbox" name="hobby" Yalue="1! 同 
checked> 映 画 
<1nput type= "cheockbox!" name= "hobby" Ya1ue= "2" > 読書 
<1nput type= "Checkbox" name="hobby" Yalue="3! 同 
checked> ス ポー ツ 
</1abe1 > 
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< わ エ > 
<1npu 上 ype= "Subm1t" Ya1ue= "送信 "> 
<1nput type=" エ eS8et 上 " Ya1ue=" リ セッ トリ "> 
</ Eo ェ m> 

</body> 

</htm1 > 


| HTML の 練 吾 3 
を うつ G 口 file:///C: /work/list2_6.html 


ーーーーーーーーーーー バ ーーーー 


ET 
性 別 @ 男 O 女 
請 味 以 映画 口 読書 罰 ス ボー 
| 送信 | リセット | 








人 
あ Web ペ ー ジ 内 の 改行 に つい て 


rr 


HTML で 記述 し た 文章 を ブラ ウザ で 表示 する と 、 改行 や イン デン ト な ど は 無視 
され て 表示 され ます 。 改行 を ペー ジ に 表示 し た い 場 合 は 、 該 当 箇所 に く br> 要素 
を 記述 し ます 。 た だ し 、 本 来 く br> 要 素 は 、 リ スト 2.6 の よう に レイ アウ ト を 整 
える 用 途 で は 利用 し ませ ん 。 ぐ br> は 長い 文章 を 折り 返す 目的 で 、 主 に く p> 要 
素 の 中 な ど で 利 用 し ます 。 見 た 目 を 整え る 場合 は 、 く br> 要 素 を 挿入 する の で は 
な く 、 次 章 で 取り 上 げ る CSS を 利用 し ます 。 


この 他 に も 、 フ ォ ー ム 内 に 記述 する 要素 と し て 、 複 数 タグ の 組み 合わ せ に よ 
る セレ クト ボッ クス が あり ます 。 こ れ に つい て は 次 項 で 紹介 し ます 。 


セレ クト ボッ クス 


セレ クト ボッ クス は 、 複 数 の 選択 肢 の 中 か ら 、 ユ ー ザ ー に よる 選択 を 受け 付 
け ま す 。 <input> 要素 同様 、 フ ォ ー ム 内 の 入力 部 品 の 一 種 で す 。 
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シン ル 説明 
選択 肢 を 定義 する 
<option> タグ が 持つ 属性 
属性 名 か コ に 2) 


入力 デー タ と し て 送信 され る 値 


項目 が 選択 中 で ある こと を 表わす 。 属 性 名 の み を 指定 する 





例 と し て 、 次 の よう な 構成 の セレ クト ボッ クス を 表示 し て み ま し ょ う 。 


8eec 





セレ クト ボッ クス の 構成 イメ ー ジ 


リス ト 2.7 で は 、3 件 の 項目 を 持つ セレ クト ボッ クス を 表示 し て いま す 。 


リス ト ら .7 セレ クト ボッ クス の 表示 


< !DOCTYPE htm1]> 
<htm1] 1anqd="]a"> 
<head> 
<met ヒ a Char8e キ 上 = "ut 上 FEF-8『> 
< 上 ュ it 上 1e>HTML の 練習 </ モ 上 1t1e> 
</head> 
<DOdY> 
< 正 O エ mm> 


<8eG ecC ヒ > 


<option value="1m> オ オ サ ン ショ ウ ウ オ </option> 
<option va1ue="2" ge1ected> メ キシ コ サ ラ マン ダー</option> 
<option value="3"> マ ル メ タビ オカ ガエル </option> 
</ ge1ec キ > 
</ Form> 
</body> 
</htm1> 





|] HTML の 練 避 し 例 。 


4 3 fie777Cworit2_7.htm 


オオ サン ショ ウ ウ オ Us 
メキ シコ サラ マン ダ 


y 複数 の タグ を 組み 合わ せる こと に より 、1 つの 部 品 (リス ト 、 
セレ クト ボッ クス 、 テ ー ブ ル 、 フ ォ ー ム な ど ) を 生成 する タグ 
が ある 。 
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この 章 の 到達 度 チ ェ ッ ク 


⑳ 1 HTML5 で 推奨 され て いる 文字 づ ゴー ド は な ん で すか ? 

Q⑳@ オプ ショ ン ボ タン を 表示 する た め に は 、 ぐ input> タ グ に どの よう な 属性 
と 値 を 付け れ ば 良い で し ょ うか ? 

QOS 縦 2 列 、 横 3 行 (先頭 が 見 出し 行 ) の テー ブル を 生成 する た め に 、 空 欄 
A 一 C を 適切 な タグ で 埋め て くだ さい 。 





<tab1@> 

< <Lm No.<_B ]><[ > 商品 る </[ ョ 」z</LA > 

<| A |><| c |>001</| c |zs| c | > えん ぴ つ </| Cc |z</| _A |> 
<| A |><| c |>002</| Cc |><| Cc > 消し ゴム </| c |></| ぇ |> 


</tab1e> 


⑳4 Ahtml か ら B.html へ 相対 パス 9 記 Ahtml か ら B.html へ 相対 パス 
指定 で 移動 する 場合 、 リ ンク 先 指定 で 移動 する 場合 、 リ ンク 
URL は どの よう に 記述 し ます 先 URL は どの よう に 記述 し ま 
か ? すか ? 





ご 解答 は 巻末 に 掲載 
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、 ご の 章 で 学ぶ こと 





CSS と は 
CSS の 書き 方 
セレ クタ 

プロ バテ ィ 











RY て 3 人 短 二 みか 人 と すか CS まさ か ETt せ も KLH7 の LDS 人 CHIE 人 が CCCDSTKKKCYES は Lt 人 kt が 人 KCLESLEA 人 MK 2 人 HU は XENKCLCEKDSLEYYKMD 
半 捧 扶 電 第 ふう 電 1 提 抽 寺 拓 提 拓 拓 提 提 担持 半 提 提 拓 拓 提 提 和 拓 才 提 香寺 半身 提 扶 提 邊 提 提 捧 提 持 壮 提 拓 寺 提 


@ HTML で 内 容 を 決め 、CSS で デザ イン する 人 





HTML で は 、 Web ペ ー ジ に 配置 する ブラ ウザ は 、 HTML の 記述 に 従っ て 
内 容 を 記述 し ます Web ペ ー ジ の 内 容 を 表示 し ます 


けり ビッ ツク グ に 


置く も の リス ト | 
・ カ ー テ ン 
メン 生還 


は ど 
0 の 


ムービー. 


M 
M 
還 
/ 
6 
| | 
| 
) 
( 


証人 ひ 一 ( 


リビン グ の デザ イン 

・ カ ー テ ン の 色 は ピン ク 

・ テ レビ の サイ ズ は 40 イ ンチ 

・ ソ ファ の 位置 は 壁 か ら 10cm 
| ノ 


いた Un TWAOTWWIDUWmUAIYe Wa TMANWTOMAMKDJU 司 AYAa AM AV 1! 





第 2 章 で 学ん だ HTML は 、 文 書 を 構造 的 に 管理 する た め の 技 術 で し た 。 本 
章 で 学ぶ CSS を HTML と 組み 合わ せ て 使う こと で 、 文書 を 装飾 で きま す 。 
CSS の 操作 は 、JavaScript に よる 処理 の 定番 で す 。 
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%2) CSS と は 


CSS (Cascading Style Sheets) は 、HTML 文書 を 装飾 する (飾り 付け る ) 
た め の 言 語 で す 。 背 景 や 文字 の 色 設 定 を 行なっ た り 、 文 字 や 画像 の サイ ズ や 表 
位置 を 調整 し た り と 、Web ペ ー ジ に スタ イル (見 栄え に 関す る 情報 ) を 適用 
する た め に 使わ れ ま す 。 





HTML HTML 十 CSS 
けろ 太 の フロ グ 


ニル: 914 7: :) 















けろ 太 の ブロ グ 
写真 を UP し て ます 


2013 年 9 月 30 日 
遊び に 行き まし た 


ーー 






2073 存 9 万 30 万 
遊び に 行き まし た 





< !DOCTYPE htm1> 

<htm] 1anqg="]a"> 
<head> 

<meta Char8et="utfF-8『"> 
<title> け る 太 の ブロ グ < /t 上 it1e> 
</head> 

<DOdY> 

<d1 ざ > 

<h1> け ろ る 太 の ブロ グ </h1 > 

<p> 写真 を UP し て ます </p> 
</d1V> 

<dd1 ざ > 

<h2>2013 年 9 月 30 日 </h2> 
<p> 遊び に いき まし た 。</p> 
</d1 ざ > 

</ body> 

</htm1 > 


3 
mard1nm: 0: 
paddinqg: 0: 


body { 1 
background-Co1or: 韻 66oCFF: 全 


h1 1 
Font-81ZeG: 14DX: 

) 

h2{ 

Font-g12eG: 10DX: 
Font-gty1e: 1 上 a11O: 


div{ 





HTML + CSS で 装飾 され た 静 的 Web ペ ー ジ を 作成 で きる 


HTMIL 文書 の 見 た 目 を 決め る 仕組 み を スタ イル シー ト と 呼び ます 。 CSS 
は 、 ス タイ ル シ ー ト 言語 の 1 つ で す 。 ス タイ ル シ ー ト 言語 は 、HTML な ど 
の マー クア ッ プ 言語 で 記述 され た 文書 の スタ イル を 指定 する た め に 使わ れ ま す 。 





う 5 





ww 本 迷 ボ す サ 
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ます www waW ye キザ WWWWWhyHW ar mw か wm を W Wa EK た ます りき また まま お あま まり 用 も 0 WM + 本 W ネ Em PIE TTY まま | Fr ネギ 
か A NNW3WMNMNWWWW ペ MMWWW ET T'T1 た we を WW 1 ポル wwg - ひ 
Nr キャ _- f 
- WW 『W WWWNNNWWWWNMWWWNWWWWWWWA WNWNMNWWWWMWMANN や WWMWWANIWNWKWINWWNWmWN ww ず \ 『) 
WW で WIT まま WW = ・ WNW Ve W ル ま WW や WhWWWWNNNYW や WMWWWn WWYWWWNNAMWWWATYWWY ポ YNNWW マ MT _- ー 
W 衝 か nm。 ポ Nm Nm WI N で WNWWWKw ポ ww * _ _ _ 
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CSS を 記述 する 場所 


HTML の 中 に CSS を 記述 する 方 法 も あり ます が 、 基 本 的 に HTML と CSS は 
別々 の ファ イル に 記述 し ます 。Web ペ ー ジ の 本 体 は HTML フ ァイル な の で 、 
HTML フ ァイル か ら 、CSS で 記述 し た ファ イル (CSS フ ァイル ) を 読み 込み ま 
和 








1. CSS の コー ド の み を ファ イル に 記述 し 、 拡 張子 を 「.css] と し て 保存 し 
ます 。 

2.HTML フ ァイル に <link> 要 素 を 記述 し 、href 属 性 に CSS フ ァイル の 
URL を 指定 し ます 。< ぐ link> 要素 は <head> 要素 の 中 に 記述 し ます 。 な 
お 、 く ぐ く Iink> 要素 は 、 終 了 タ グ の な い 空 要素 で す 。 


ふく Ii ロ k> タグ で CSS ファ イル を 読み 込む 
<1ink re]="gtylesheet 上 " type="text/cssg" href="!CSS フ ァイル の URL "> 





属性 の 前 に は 半角 スペ ー ス を 入れ ず に ! 


rel 属 性 と type 属 性 に つい て は 、CSS フ ァイル を 読み 込む 場合 は 必ず この よ 
うに 書く 、 決 まり ご と だ と お ぽ え て くだ さい 。CSS フ ァイル の URL は 、 絶 対 パ 
ス ま た は 相対 パス で 指定 し ます 。 

一 般 的 に HTML フ ァイル に CSS フ ァイル を 読み 込む 場合 、 右 ペー ジ の 図 の 
よう に ファ イル を 配置 し 、 次 の よう に 記述 し ます 。 


<1ink re]="stylegheet" type="text/csg" href='styl1e/main.Cs8 リ "> 








ーー ーーー テー テバ テー テーーーーーーーー マ バー マジ ーー ペー ツー マー ペニー マー マーーーーー ーー ーー キー バル ーー いや ーー ペー ニー ペー 





ウフ 





<11nk rels"gtylesheet" type="text/cgg" hrefsrty1e/main.cgs"> ) 


1e つ で Fe ゃ いっ 


ニーソ ューー ふ ツア ーー は m たる て YYe つ ーーー ヤー ニー ンー ニー だ cet あー へ の ペー ん パックン か ーー 








ディ レク トリ 階層 図 


和 (9) 50OU 
pb CSS は HTML 文書 を 装飾 する た め に 用 いる 。 
p CSS コー ド は 拡張 子 「.css」] の ファ イル と し て 保存 する 。 


p HTML ファ イル か ら CSS ファ イル を 読み 込む 。 


較 Oheck 宝 est 1 


⑳ 1 CSS と は な に か 説明 し て くだ さい 。 
⑳@ 次 は HTM ファ イル か ら CSS フ ァイル を 読み 込む 0 タグ で す 。 空欄 A 一 D 
を 適切 な 語 で 埋め ゆ て くだ さい 。 


<[| A | re1=[ B | type=[| C | [| D |="CS8 フ ァイル の URL"> 





ご 解答 は 巻末 に 掲載 


っ / 
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と 王 CSS の 書き 方 





29) セレ クタ と プロ バテ ィ の 指定 


CSS を 記述 する 際 に 必要 な 情報 は 、 








@ どの 要素 (タグ ) に 対し て 
@ どの よう な スタ イル を 適用 する の か 


の 2 点 で す 。 

| どの 要素 (タグ ) に 対し て 」 を セレ クタ で 指定 し 、「 どの よう な スタ イル を 
適用 する の か 」 を プロ パテ ィ で 指定 し ます 。 プ ロ パ ティ は 色 や サイ ズ な ど 、 さ 
ま ざ ま な 種類 が ある た め 、1 つ の セレ クタ に 対し て 複数 の プロ パテ ィ を 付与 で 
きま す 。 


: 補 ビレ クタ と プロ パテ ィ の 記述 プロ パテ ィ (スタ イル の 種類 ) に は 必ず 値 を 指定 する 
セ 必 クタ 狗 骨 / ロ が Ks) 偽 /) 
プロ バテ ィ と 値 は コロ ン (:) で 区 切る 
最 


後 の プ ロ パ ティ 指定 の : は 省略 で きる 。 た だ し 、 複 数 指定 
セル クタ 4 する 場合 は 必ず : で 終わ る 、 と お ぼ え た ほう が 間違い が な い 


日 な の プロ バテ ィ を 指定 する 場合 は 
プロ パテ ィ z 値 : ro 呈 は 、 
の セミ コロ ン (:) で 区 切っ て 改行 する 

















還 記 述 例 


p { ゴ <p> 要素 に 対し て 
co1or: red: color プロ パテ ィ の 値 を red ( 赤 ) に 指定 
Font-g1ize: 10Dpxz: font-Size プロ パテ ィ の 値 を 10px (10 ピクセル) に 指定 








失 計 rw me CSS を 記述 する と き に は 、 以 下 の 注 意 点 が あり ます 。 
・ 必ず 半角 英 数 字 で 記述 する 
・ 英字 の 大 文字 と 小文字 の 区 別 は な い が 、 小 文字 で 統一 し た ほう が 良い 


プロ パテ ィ に は 必ず 値 を 指定 し 、 プ ロ パ ティ と 値 は 必ず コロ ン (:) で 区 切 
り ま す 。 プ ロ パ ティ や 値 は 、 英 単語 の 意味 が わか れ ば 、 あ る 程度 類推 で きる で 
し ょ う 。 color は |「 色 」、font-size は | 文字 サイ ズ 」 を 指定 する プロ パテ ィ で す 。 
記述 例 で は 、<p> 要素 、 つ まり 段落 全体 に 対し て 、 文 字 の 色 を 赤 、 文 字 の サイ 
ズ を 10 ピ クセ ル と いう スタ イル を 適用 し て いま す 。 

次 人 節 で は 、 よ く 使 われ る セレ クタ と プロ パテ ィ に つい て まとめ ます 。 





p 1] つの セレ クタ に 対し て 複数 の プロ パティ を 設定 する こと が で きる 。 


p スタ イル の 適用 対象 を セレ クタ で 指定 し 、 適 用 する スタ イル を プロ バ 
ティ で 指定 する 。 


・ 下 プロ バ パティ と 値 は 必ず コロ ン (:) で 区 切り 、 複 数 の プロ バ パティ を 
指定 する 場合 は セミ コロ ン (:) で 区 切る 。 


還 Oheck 更 est @ 


⑳ 1 次 は CSS を 記述 する と き の 文法 で す 。 空 欄 A と B を 適切 な 語 で 埋め て く 


だ さい 。 


| A 央 
[| sg |: 値 : 
し 3 |: 値 


Q⑩2 font-size は どの よう な プロ パテ ィ で すか ? 





解答 は 巻末 に 掲載 


っ 9 








5 %2) プロ パティ の 種類 


まず は プロ パテ ィ か ら で す 。 ス タイ ル を 適用 する た め の プ ロ パ ティ が 数 多く 
用 意 き れ て いま す 。 





Maoe SW 色 名 称 (red、blue な ど ) ま た は カラ ー コ ー 


JCK&TOUTOL | 音 景色 を 指定 する 」 ド 000000 な ど ) 


4m PA シレ っ 説明 


' block 要素 を 表示 する 
display 表示 状態 を 指定 する none 要素 を 表示 し な い 
文字 サイ ズ を 指定 する 次 の 単位 に よる 指定 が 可能 | 
] ー] mm ミリ メー トル 
margin 要素 の 外側 の 示 白 を 指定 する “ セン チ メ ー ト ル 
padding 。 | 要素 の 内 側 の 余白 を 指定 する 牧人 
ポイ ント 
width 要素 の 幅 を 指定 する パ バイカ 


tet | 提 間 MM 導 UI CMom 


top 上 端 か ら 要 素 まで の 距離 を 指定 する | eX 英字 「x」 の 高 さ を 1 と する 単位 
ウィ ンド ウサ イズ また は 親 要 素 の 
left " 左端 か ら 要 素 まで の 距離 を 指定 する _ サイズ を 100% と する 単位 


ンー 





ーー 


No。 カラ ー コ ー ド は 、Photoshop、Illustrator、Dreamweaver「 な どの Web 
ラン デザ イン 制作 に 利用 する グラ フィ ッ ク ツ ー ル で 見 る こと が で きま す 。 コ ン 
ピュ ー タ の ディ スプ レイ に 表示 され る 色 は 、 光 の 三原 色 ( 赤 、 緑 、 青 ) を 混ぜ 合 
わせ て 作ら れ て いま す 。 それ ぞ れ の 色 の 強 さ を 最小 0 か ら 最 大 55 まで の 数 値 
で 表わし 、16 進 数 に し て 並べ た 6 桁 の 数 値 が カラ ー コ ー ド で す 。 


ー ン 一 


margin と padding は どちら も 余白 の 幅 を 指定 する プロ パテ ィ で す が 、 余 曰 を 
取る 位置 が 異な り ま す 。 次 の よう に 、margin が 要素 の 外側 、padding が 要素 の 
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内 側 で す 。 





内 容 内 容 内 容 内 容 内 容 内 容 
MM 


2 0 和 0 
0 補 Rn 0 0 


MM NT mA 90 人 MA 間 
MM 0 昌 0 6) (2 0 MM 0 ll 









還 洗 ーー ーー 
ーーー ーーー ニ ーー ニー 

















margin と padding の 違い 





② セレ クタ の 種類 


セレ クタ は 対象 要素 を 指定 する 方 法 で 、 複 数 の 種類 が あり ます 。 タ グ 名 が 同 
じ 要 素 す べ て に スタ イル を 適用 し た い 場 合 と 、1 つの 要素 に 対し て の み ス タイ 
ル を 指定 し た い 場 合 と で は 、 利 用 する セレ クタ が 異な り ま す 。 状況 に 応じ て 適 
切な セレ クタ を 選択 し まし ょ う 。 





K3 基本 セレ クタ 

対象 要素 を タグ 名 で 指定 し ます 。 

リス ト 3.1 で は 、HTML 文 書 中 の <a> 要素 すべ て に 対し て フォ ント の 大 きき 
を 50px に する スタ イル を 適用 し て いま す 。 な お 、CSS 中 の コメ ント (説明 文 ) 
は /〆 か ら */ の 間 に 記述 し ます 。 


リス ト 3.1 甚 本 セレ クタ の 利用 
CSS style.css 


at 


Font-g1ze: 50Dx: /* フォ ント の 大 き さ を 50px に する */ 


) 


HTML list3_1.html 





< !DOCTYPE html > 
<html lang="]a"> 
<head> 


<meta Char8et="utE-8 リ "> 
< 上 1 上 1e>HTML の 練習 </ 上 1 上 1e> 
<1ink re]="gt 上 ylesheet 上 " tyDe="tex 上 /cgg" href="Styl1eG.CS8 "> 
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</head> 
<D わ Od> 


<a href="prev . htm1 "> 前 ペー ジ へ </a> pm 
<a href= "next .htm1 "> 次 ペー ジ へ </a> の タグ すべ て に 
<h1> サ イト 説明 </h1> スタ イル が 適用 され る 


<p> 主 に 趣味 の 写真 を 掲載 し て いま す 。 </p> 
<a href= "index .htm1 ">TOP へ </a> 
</body> 
</ htm1] > 





一 実行 結果 


[HTML の 凍 習 x 埋 


ーー プー ペーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ツ ーーーーー ツ ーーー 


を ココ 。 で [file:///C:/work/list3_1.html 


前 ペー ンジ へ 次 ペー ジヘ へ 


サイ ト 説 明 


主 に 赤 味 の 写真 を 掲載 し て いま す 。 


TOP へ 





K3 ID セレ クタ 

対象 要素 を ID 属性 値 で 指定 し ます 。 ID 属性 値 は HTML 文書 の 中 で 一 意 と な 
る (重複 する 値 を 設定 で き な い ) た め 、 特 定 の 要素 1 つ だ け に スタ イル を 適用 
し た い 場 合 に 利用 し ます 。 


る D 属 性 値 の 指定 
#TD 属 性 値 { ID 属性 値 の 前 に # を 付け る 


が 旨 パ ディッ ィ ' 健 / 


} 


リス ト 32 で は 、ID 属 性 の 値 と し て 「next| を 持つ 要素 に 対し 、 ス タイ ル を 
適用 し て いま す 。 





リス ト 3.2 ID セレ クタ の 利用 
CSS style.css 


#next { 
font-81zZe: 50DX: 





HTML list3_2.html (<body> 要素 内 部 の み 抜 粋 ) 





<a href="prev . htm1 "> 前 ペー ジ へ </a> 
<a href= "next .htm1" 1d= "next "> 次 ペー ジ へ </a> 


<h1> サ イト 説明 </h1> ID 属性 値 に "next' が 指定 され て いる 
<p> 主 に 趣味 の 写真 を 掲載 し て いま す 。</p> | 要素 に の み ス タイ ル が 適用 され る 


<a href= "index .htm1 ">TOP へ </a> 





屋 実 行 結果 


を か で | I fle:// ///C:, /work/list3_ 2. 3 2.html 


火 へ や - 
前 ペー ジ へ ペー の ヽ 


サイ ト 説 明 


主 に 引 味 の 写真 を 掲載 し て いま す 。 


TOP へ 





_ HTML の < く body> 要 素 以外 の 部 分 は 、 先 ほど の リス トコ 3.1 と 同 じ な の で 割 


愛し て いま す 。 この コー ド を 試す 場合 は 、 リ スト 93.1 の く body> 要 素 の 内 
部 を リス ト 3.2 の HTML に 変更 し て くだ さい 。 以 降 の 記述 例 で も 、 く body> 要 
夫 が 2C72 スト 3.1 と 同じ な の で 割愛 し ます 。 | 


k4 ツラ スズ セレ クタ 
CSS に お ける クラ ス と は 、 ス タイ ル を ひと まとめ に し て 名 前 を 付け た も の の 
こと で す 。 ク ラス は 、 ど の 要素 に 対し て も 付け る こと が で きる の で 、 複数 の 要 
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4 Mn 4 WW まで we を や \ ド かま W 生 二 や ま マ ie ま W キネ キネ ま 「 補 汗 まま の PJN# や NM で 『 My ザコ A > 
"サテ サ で や や で キ TTY YS が ヤ か 省 で で で が - 0 る: が か や ず ま 
が JWNNwrw ・ - 「 NN ま WWY WW ド き や せ wm4 『 WNW まや が W 時 末寺 TE EEE) ・ W * ぁ 』 ww 
すず NN _。 生 。 _ _ 「 
WW ル まま テ ロ 


素 の 中 か ら 任 意 の 要素 を 選択 し て スタ イル を 適用 し た い 場 合 に 利用 し ます 。 
クラ ス セ レク タ の 使い 方 は 、 そ の 他 の セレ クタ と は 少し 異な り ま す 。 ま ず 
CSS で クラ ス を 定義 し 、 対 象 要素 の class 属 性 値 と し て クラ ス 名 を 指定 し ます 。 


クラ ス を 定義 し て 


-note { 


) 


CoO1or: ed 





Bm ーーーー ツ 


こ で と では 、「note」 と いう 名 前 で 、 





色 を 変更 し た い 要 素 の class 属性 に 、 
クラ ス 名 (note) を 指定 


さっ 





色 を 変更 する クラ ス を 定義 。 
クラ ス セ レク タ の 使い 方 
クラ ス を 定義 する 方 法 は 次 の と お り で す 。 


クラ ス 名 の 指定 
y 必 あ 決 尊 4 クラ ス 名 の 前 に ドッ ト (.) を 付け る 
) 


プ 目 パティ 。, 値 。 





ドッ ト (.) に 続け て クラ ス 名 を 指定 し ます 。 ク ラス 名 は 任意 の 名 称 に する こ 
と が で きま す 。 

リス ト 33 で は 、CSS で 「paging」 と いう 名 前 の クラ ス を 定義 し 、「paging」 
クラ ス を 適用 し た い HTML の 要素 に class 属 性 で 指定 し て いま す 。 


リス ト 3.3 クラ ス セ レク タ の 利用 
CSS style.css 


・paging { クラ ス 名 は paging 


Font-81ze: 50DxX: 


) 








HTML list3 3.html (<body> 要素 内 部 の み 抜 粋 ) 


<a href= "Drev.htm1" oc1agg= "pad1nd "> 前 ペー ジ へ </a> 
<a href= "nexE .htm1! cl1agg= "pad1nd す "> 次 ペー ジ へ </a> 
<h1> サ イト 説明 </h1> 


<p> 主 に 趣味 の 写真 を 掲載 し て いま す 。</ ゎ > class 属性 値 に "pading' が 指定 され て 
<a href="index .htm1 ">TOP へ </a> いる 要素 に の み ス タイ ル が 適用 され る 


周 実 行 結果 





し 全 。 


Ma Bfiez77c ie33hmlh ')%160〔 ぴ ト ーーーーーーーーー…ーーーーー…ーーーー…ーーーー…ーーーー… 


oe O w や O 


朋 | ペーー バ ノ ZN プ / ブ ペ ーー 
サイ ト 説 明 


主 に 趣味 の 写真 を 掲載 し て いま す 。 
TOP へ 





(WM ID セレ クタ と クラ ス セ レク タ の 弄 い は わか り に くい の で 、 摘 定 し て お きま 
ンー す 。 基本 的 に 、ID セ レク タ は 「Web ペ ー ジ の 要素 の うち 1 つ だ け に スタ イ 
ル を 適用 し た い 場 合 ]、 ク ラス セレ クタ は 「Web ペ ー ジ の 複数 の 要素 に 同時 に ス 
タイ ル を 適用 し た い 場 合 ] に 利用 し ます 。 た と えば 、 ス タイ ル を 1 つの 画像 に し 
か 適用 し な い 場 合 は ID セレ クタ を 使い 、 複 数 件 の 画像 に スタ イル を 適用 し た い 場 
合 は クラ ス セ レク タ を 使い ます 。 





K3 全 称 セレ クタ 

HTML 文書 中 の すべ て の 要素 に 対し て スタ イル を 適用 し ます 。 

リス ト 3.4 で は 、HTML 中 の <body> 要素 内 の すべ て の 有 要素 に 対し て スタ イ 
ル を 適用 し て いま す 。 


65 
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* W で WW 生 ォ WW 
WW EE SN AN ず e = っ 4 さす we を 乱 ゆ ま . NMwv\ や も WW ポポ や ホネ WMN そ ANWn+ た キネ ポポ MM 
_ _- ・ 4 』 WAMw や が # 「 ま ) * WWJW 
_ K ま d ゃ Yi 4 YA ) ず リポ か 4 
WW ポポ ャ キネ WW ま WWY _- 


リス ト 3.4 全 称 セレ クタ の 利用 
CSS style.css 


1 セレ クタ 名 を * に する 


mard1n: 50DX: 





J 


HTML list3 4.html (<body> 要素 内 部 の み 抜 粋 ) 


<a href="prev . htm1 "> 前 ペー ジ へ </a> HTML 文書 中 の 要素 すべ て に 
<a href="next .htm1 "> 次 ペー ジ へ </a> スタ イル が 適用 され る 
<h1> サ イト 説明 </h1> 


<p> 主 に 趣味 の 写真 を 掲載 し て いま す 。</p> 
<a href= "jindex . htm1 ">TOP へ </a> 





を っ う G [file:///C:/work/list3_4.html 


サイ ト 説 明 


主 に 趣味 の 写真 を 掲載 し て いま す 。 


TOP へ 





最後 に 使い 分 け を まとめ て お きま し ょ う 。 
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MM 1 5 AI w 避 りや ドル いよ す すす す 7 っ 。  。 mwmw ず 」 9 や や で. YYET4Vth 
A で "1 「 


し 5 まま まま あま AL EE あえ まあ 】 生か の や か か か すか か ャ や も ORAL い プ た 人 で WW し か 
WWWWNNWPwiimPWWw パ hyYneT ず も h か Ui 屋 作 か か IEJUJULILIEYJI YY141 し ん # eV のか OO を いか EN は ププ アア チ ポ * swWWW WNW 東 W/A Wa 馬 ア 4 W す ず W あ 
MM WW WW いか キツ WW 1 MI か De セ の ふい か し < まお いま | EE LLS LM WWWNNW キ mnWWTWNTNWWYNNNN 者 人 W キ 、 ポーン ANY 7W・% を も WW ニー イ ルリ ュー と イル と 怖 誠 Az W 二 ルル 伸 "WWW 
し 衝 WW 計上 INNWNf ザ ww ヤ や LMMMMIMuMMuLIMIMMLLIEJNuduiu/ KMLLMLMLMILALAJMLULLA AL WNWWNWYNF y WNWWNern4mwmtv し ゃ 品 


用 途 利用 する セレ クタ 0 まま さゆ [か あこ 利用 イメ ー ジ 


ペー ジ 内 の 同種 の 要素 
要素 に スタ イル を 適用 | 基本 セレ クタ | タグ 名 で 指定 ARGzeruro 
ID セレ クタ タグ に ID 属性 値 を 指定 dt MM 
特定 の 要素 の み に ス タ 


イル を 適用 ベー ジ 内 の 複数 の 要素 
クラ ス セ レク タ タグ に class 属性 を 指定 の 中 か ら 任 意 の 要素 を 
選択 し て 適用 
< こ ベー ジ (<body> 要素 ) 
すべ て の 要素 に 一 括 で 和 」 上 


この 章 の 到達 度 チ ェ ッ ク 


0⑳ 1 同一 ディ レク トリ 内 の CSS ファ イル 「style.csS」 を HTML ファ イル に 
読み 込む に は <Ilink> タグ を どの よう に 記述 すれ ば 良い で すか ? 

Q8 文書 内 の すべ て の < ぐ p> 要素 の 文字 色 を 青 に 設定 する CSS を 記述 し て く 
だ さい 。 な お 、 青 色 を 表わす 属性 値 は 「blue」 で す 。 

QG②「ex」 と いう ID 属性 値 を 持つ 要素 の 文字 サイ ズ を 15px に 設定 する CSS 
を 記述 し て くだ さい 。 

Q⑳4 文書 内 の すべ て の 要素 の 余白 を 内 側 / 外 側 と も に 0px に 設定 する CSS を 
記述 し て くだ さい 。 

⑳5 要素 の サイ ズ を 幅 200px、 高 さ 80px に 設定 する 「box」 と いう 名 前 の 
クラ ス を CSS で 定義 し て くだ さい 。 





ご 解答 は 巻末 に 掲載 
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太 本 的 な 書き 方 
変人 数 と テー タ 型 
演算 子 

本 2 

連想 配列 











い U いたす oy な WW な も の よ か PT 避 の や かい まや こる 
4 い ん ん MO さか いい yt KY CAX KA ルル TTYYYAT いい 
7 リザ パ ん hhy4 Ser 6) YY 4 0 か は 4YVW イ | YY Nr か る 4 
MY ィ OXOUOUAOXUUUOOCCCODCKKXONCCCKCCOCUCCOOCCCCUSAZ7KKOUCKKKKUCUOCC 





@ JavaScript で 扱う デー タ は 変数 や 配列 に 入れ る 急 


文字 や 数 値 な ど 、 デー タ は 、 種類 別に 「 変 数 」 と いう 
パソ コン が 扱う 情報 が 「 デ ー タ 」 で す 。 入れ 物 に し まい ます 。 


JavaScript で は 、 デ ー タ を 使っ て する と 、 JavaScript で 
処理 (操作 ) を 行ない ます デー タ を 扱い や すく な り ま す 


よく 使う か ら 
大 切 に 
し まっ て お こう … 


「 配 列 」、 と いう 入れ 物 に は 、 


た だ し 、 変数 に は 1 つ し か デー タ を 
複数 の デー タ を し まう こと が で きま す 


し まえ ませ ん 。 同じ よう な デー タ が 
た くさ ん ある と き は 
どう すれ ば 良い で し ょ う ? 


この 他 、 本 章 で は 、 
JavaScript を 
記述 する た め の 
基本 的 な ルー ル を 
学び まし ょ う 





第 3 草 ま で は 、JavaScript を 学ぶ た め の 下 地 作 り で し た 。 ご の 章 か ら は 、 い 
よい よ JavaScript に つい て 学ん で いき まし ょ う 。 
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まず は 1 行 の JavaScript か がら! 





書き 方 を 学ぶ 前 に 、 簡 単 な TavaScript を 動か し て み ま し ょ う 。 リ スト 4.1 を す 
べ て 半角 の 英 数 字 と 記号 で 入力 し て HTML フ ァイル と し て 保存 し 、 ブ プラ ウザ 
で 表示 し て みて くだ さい 。 こ れ ま で に 紹介 し た HTML と な る の は < く script> 
か らく </script> まで の 3 行 で す 。 そ し て 、<script> タグ に 半 ま れ た 直 の 部 分 が 
]avaScript で す 。 








リス ト 4.1 ダイ アロ グ ボ ックス の 表示 (list4.1.html) 


< !DOCTYPE html> 
<htm] 1anq="]a"> 
<head> 
<meta CharSe ヒ 上 ="utfF-8 リ > 
< 上 it]e> あ いさ つ を 表示 する スク リプ ト </t 上 it 上]1@e> 
く 8C エ 1 エキ > 
atert("He]11o Wor1d!!") 』 一 一 ーーーーーーーーーーーーーーーーーーー 一 直 
< く / 8C エ 1p キ > 
</head> 
<DOQY> 
</ body> 
</htm1] > 





画 実行 結果 


、 あい さ つ を 表示 する スカ リプ ト x 


を う XX 口 fle:///C:/work/list4_1.html 間 _ 
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ALIgW 了 ま 刻 放 @ た W WAV まま WJWW WM WNW ザ FN も 4W ネ Y WWNWWANNWNWANNWYYNANWAYNNWwYNWT WWWw ド WWNNWWNNWM&KMWYALAMWT ANWw ず NNP ポ WMNWWWWNwwPw や WWWMNMWW NN 二 汗 寺 ます ル WWW WW WW いか DP NN WNWWTNWWMWN 
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プラ ウザ が 起動 する と 、 す ぐに ダイ アロ グ ボ ックス が 表示 され る は ず で す 。 
これ は TavaScript が 表示 し た も の で す 。 [OK] ボタ ン を クリ ッ ク す る と 、 上 真っ 
白 で な に も 表示 し な い Web ペ ー ジ だ けが 残り ます (<body> 要素 の 中 に な に も 
記述 し て いな いか ら で す )。 右上 の 較 財 ボタン で 閉じ て くだ さい 。 


書き 方 の ルー ル 


<body> 要素 内 に 記述 し た 内 容 を 単純 に 表示 する HTML と 違う こと が 、 お わ 
か り い た だ けた で し ょ うか 。 先ほど の 例 の TavaScript の スク リプ ト 部 分 を 再掲 
し ます 。 











a1ert( "He11o Mor1d!!")』 この 1 行 が JavaScript 


まず 、TavaScript を 記述 する 際 の ルー ル に つい て 学び まし ょ う 。 


JavaScript の 書き 方 の ルー ル 
ルー ル 1 『 基本 的 に 半角 の 英 数 字 と 記号 の み を 使う 。 


ルー ル 2 文字 列 (文字 の 並び ) を 扱う 場合 は シン グル クォート ( ) か ダブ 
ルク オォ ー ト () で 囲む 。 


ルー ル 3 大 文字 と 小文字 は 別 の 文字 と し て 扱わ れる 。 
ルー ル 4 凍 令 文 の り 未 尾 に は セミ コロ ン CC:) を 付け る 。 


ルー ル 5 複数 行 に 渡る ひと まとまり の 命令 群 を 波 か っ こ { } で 囲む 。 囲 まれ 
た 範囲 を ブロ ビィ rr と 呼 点 。 





セミ コロ ン を 省略 し た 場合 、TavaScript が 文末 と 思わ れる 人 箇所 を 探し 出し 、 
自動 的 に セミ コロ ン を 付け 足し て し て くれ ます 。 た だ し 、 自 分 が 想定 し た 箇所 
と は 異な る 箇所 に セミ コロ ン が 挿入 され て し まう 可能 性 も あり ます 。 文末 を 明 
確 に する た め に も 、 必 ず セ ミコ ロン を 付け る 癖 を つけ た ほう が 良い で し ょ う 。 

また 、TavaScript は 、 ス クリ プ ト の 中 で 自由 に 改行 や 半角 の スペ ー ス (空白 )、 
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タプ を 挿入 し て 良い こと に な っ て いま す 。 た と えば 、 次 の 2 つの スク リプ ト は 
どちら も まっ た く 同 じ 動 作 を し ます 。 


for (1=0:1<10:1 ユ ++) {(a1ert(1) 』) 







ュー) < 科 r 9 倍 0 ! 99 伯 0 1 御 ORND 60 や い 0 
alert( 1 ): 
) 





{ か ら }) まで が ブロ ッ ク 





どちら の 書き 方 を する か は 個人 の 好み に も より ます が 、 一 般 的 に は 2 つ 目 の 
よう に ブロ ッ ク の 中 の 命令 文 に は 先頭 に タプ を 挿入 し て 字 下 げ (イン デン ト ) 
を し ます 。 こ の よう に する こと で 、 ど こ か ら ど こま で が プロ ッ ク な の か が わか 
りや すく な り ま す 。 


この よう に 、 コ ー ド の 改行 や イン デン ト な ど が 許さ れ て いる (動作 に 関係 
し な いり と よ を フリ ー フ ォ ー マ ッ ト と 呼び ます 。 JavaScript や HTML は 
フリ ー フ ォ ー マ ッ ト の 言語 で す 。 





JavaScript を 記述 する 場所 


]avaScript は 、HTML フ ァイル の 中 に 組み 込む 形 で 記述 し ます 。 記述 方 法 
は 、 次 の 2 通り が あり ます 。 





@ ご Script> 要素 の 中 に 記述 する 
@ 外部 の JavaScript ファ イル に 記述 する (HTML か ら JavaScript を 読み 込 
む ) 


どちら の 方 法 で も <script> 要素 を 利用 し ます 。Web ペ ー ジ を ブラ ウザ で 
表示 する と 、 上 か ら 順 に HTML タ グ が 読み 込ま れ て いき ます 。 JavaScript は 
<script> 要素 が 読み 込ま れ た タイ ミン グ で 実行 きれ ます 。 

<script> 要素 は 、<head> 要素 と <body> 要素 の どちら の 中 に 記述 し て も か 
まい ませ ん が 、 一 般 的 に は <head> 要素 の 中 に 記述 する こと が 多い よう で す 。 
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た だ し 、<script> 要素 の 実行 中 は 、 以 降 の HTML タ グ の 読み 込み が スト ッ プ 
し 、 表 示 の 遅延 に つなが り ま す 。 そ れ を 防ぐ た め に <bodyz> 要素 内 の 最 下 部 に 
記述 する こと も あり ます 。 


K <script> 要素 の 中 に 記述 する 方 法 
<script> 要素 の 開始 タグ と 終了 タグ の 間 が ]avaScript を 記述 する 位置 で す 。 


JavaScript の 記述 


< く 8C エ ユエ D セ > 
ここ に JavaScrip 上 を 記述 する 
</ 8C エ 1p セ > 
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K3 外部 の JavaScript ファ イル に 記述 する 方 法 

<script> 要素 の 中 に 直接 ]JavaScript を 記述 する 方 法 で は 、HTML に よる 文 
書 構造 の 定義 と スク リプ ト が 混在 し て し まい 、「 ソ ー ス コー ド が 読み づら い 」 
「HTML と スク リプ ト の 各 担 当 間 の 分 業 が し づら い 」 な どの デメ リッ ト が あり 
ます 。 そ こ で 、 一 般 的 に は HTML フ ァイル と TavaScript フ ァイル は 別々 に 作成 
し ます 。 

まず 、TavaScript の スク リプ ト の み を ファ イル に 記述 し 、 拡 張子 を 「.js」 と 
し て 保存 し ます 。 次 に 、HTML フ ァイル に < く script> タグ を 記述 し 、src 属 性 に 
JavaScript フ ァイル の URL を 指定 し ます 。 こ の と き 、 開 始 タ グ と 終了 タグ の 間 
に は な に も 記述 し ませ ん 。 


sm、 ご SCTIDt> タグ で JavaScript フ ァイル を 読み 込む 


く 8C エ ip 上 grC= "JavaSCr1pD 上 ファ イル の URL ></ 8C エ エ p セ 上 > 





傘 は 、 リ スト 4.1 の スク リプ ト を 、 外 部 の avaScript ファ イル に 記述 し た と き 
の 例 で す 。 


リス ト 4.1A JavaScript を 外部 ファ イル に し た 場合 
HTML list4 1A.html 


< !DOCTYPE htm1]> 
<html] 1anqd="]a"> 
<head> 
<meta Char8e ヒ ="utfF-8 リ "> 
< 上 it]e> あ いさ つ を 表示 する スク リプ ト </t 上 it1e> 


く 8C エ 1p 上 gro= "8amp1]e .]8 "></ 8C エ 1p セ 上 > JavaScriDt ファ イル の 読み 込み 
</head> 


<DOQdY> 
</ body> 
</htm1 > 


JavaScript samDle.jS 


alert("He]]1o Wor1d!!")』 


これ は 、HTML フ ァイル と TavaScript フ ァイル が 、 以 下 の よ うに 同一 ディ レ 
クト リ に 配置 され て いる と き の 例 で す 。 


| ( <goript gro="8ample.]8"></goript> ) 


p 4e 0 人 ザ 避 | 症 | 
も が PJ 者 dP 財 
務 0 Vo あの 
) MIUV b り 1 り で Y IrO 
WWANYWMIWAU OMWIZWTNMML 
WWAWMMOIXAA2ONNMOMNOA 
ono ーー ma Po 。 


明 
ア 。。 


list4 1A. tml 








読 の 込み 


語 | 
は 
1 
> 
| 


sample.jS 
ディ レク トリ 階層 図 





変更 後 の HTML フ ァイル を ブラ ウザ で 表示 する と 、|list4 1A.htmll に 
「sample.js」 が 読み 込ま れ て 、 ダ イア ログ ボッ クス を 表示 する TavaScript が 実 
行 さ れ ま す 。 
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同 実 行 結果 


で あし さっ を 表示 する スク リプ ト x 報 証 
値 [file://C:/work/list4_1A.html 





コメ ント 
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コメ ント と は 、 ス クリ プ ト の 中 に 自由 に 記述 で きる メモ 書き の よう な も の で 
す 。 コ メン ト に 使用 で き な い 文字 は な いた め 、 全 角 文 字 を 使っ て 記述 する こと 
も で きま す 。 





K 1 行 の コメ ント 
// (スラ ッシュ 2 つ ) より も 後ろ の 文字 が コメ ント と な り ま す 。2 つ 目 の よ う 
に 、 命 令 文 の 後ろ に 記述 する こと も で きま す 。 


// コ メッ ツ ト で す 。 


alert("He11o Wor1d!!"): // あ いさ つ を 表示 する 


K】 複数 行 の コメ ント 
/* と で 囲ん だ 男 囲 が コメ ント に な り ま す 。 コ メン ト は 何 行 に な っ て も か ま 
いま せん 。 


/* 

コメ ント と し て 記述 し た 内 容 は 、 
スク リプ ト に は 影響 し ませ ん 。 
を / 


以上 、2 種 類 の コメ ント が あり ます 。 後 で ソー スコ ー ド を 見 返し た と き や 他 
の 人 が 見 た と き に 、 何 の 処理 を 行なっ て いる の か が 一 目 見 て わか る よう に コメ 
ント を 付け て お く と 良い で し ょ よう 。 


⑳) 値 の 出力 


数 字 や 文字 列 な どの 値 を 表示 し て 確認 する に は 、 alert と いう TavaScript の 
全 令 を 使い ます 。alert は 、 指 定 さ れ た 値 を ダイ アロ グ ボ ックス に 表示 する 命令 
で す 。TJavaScript に は 、 こ の よう に 便利 な 命令 群 が あ ら か じ め 用 意 き れ て いま 








ダイ アロ グ ポ ボッ クス の 表示 


a1ert ("表示 する 値 ") : 





ンー 
7 ら 2 ペー ジ の 「JavaScript の 書き 方 の ルー ル 」 で 紹介 し た よう に 、 


JavaScript で 文字 列 を 扱う 場合 は ダブ ルク ォ ー ト で ) と シン グル ク ォ ー 
同 ド () の いずれ か で 文字 列 を 囲み ます 。 よ っ て 、 上 記 の 「" 表 示す る 値 "] の 部 分 は 、 
「' 表 示す る 値 ] と も 記述 で きま す が 、 本 書 で は ダブ ルク ォ ー ト (") を 利用 し ます 。 


K3 コン ソー ル の 利用 

alert は 値 を 確認 する 際 に 便利 で す が 、 毎 回 ダイ アロ グ ボ ックス が 表示 され る 
の も わずらわし いも の で す 。 そ こ で 、 以 降 で は ブラ ウザ の 拡張 機能 で ある コン 
ソー ル を 利用 し て 値 を 表示 し ます 。 


ss コン ソー ル へ の 値 の 表示 


console.1og( "表示 する 値 " ) 





リス ト 4.1 の JavaScript を 一 部 変更 し て み ま し ょ う 。 次 の よう に リス ト 4.1 - 
の 「alert」 の 部 分 を 「consolel」og] に 書き 換え ます 。 書 き 換 えた HTML フ ァ 
イル は |jist4 2htmll と いう 別名 で 保存 し て くだ さい 。 








77 





6 AS。 PE 「 WI 愉 - "で そえ. WW せ nA WW MM 生ま wa wwWWW ポ ネリ で * ル リャ で で た YY を 

0 ce ww ト WWY 才 させ vYNNWNNw キ キキ いせ WWIW TE * + ・ _- _- FL 4 Y 4 _- か 1 W ww WW ます W び ポ ") かい や - の W 本 を ま WW 有 

章 - か ず 二 導き TE WNnw ww _- _ WW 「 す WW Wi p ず 6 yIYYW キ 』 ・ 6 rw※W ホ YWPW ず MM や も e\ 

| w + 1 『, - W WWAWAiT hw が WW w WW 「 ガ 
4 WW. > _ か ヤ ' す * wir WW Y ル W ザ ォ _- wwYe WW WW 4 WIT や ヤ か 年 導 の WW 本 Wv せ Pi _- まや ャ WW ギ ポ ず ポ W 
A w - ・ し WNW WWWMNWWNNWM ザ WW や _- 
が W WW ルル EE* WW 円 wwyvtWy WWWWW 和 M ポ 愉 NNWNNIWWNYNWVWNA PIT < ww - 「 表 ま 。 
直上 na 表し W 2 TTY NY ず 『 _- w W Y り 
1 ゃ * 


リス ト 4.2 コン ソー ル へ の 表示 
o1e.1og( "He11o Wor1d!!W): // あ いさ つ を コン ソー ル に 表示 





書き 換え を たら ブラ ウザ で HTML フ ァイル を 表示 し て み ま し ょ う 。 次 の よう な 
真っ 白 な Web ペー ジ が 表示 され る は ず で す 。 


円 ん さっ を 表示 する スケ リプ ト x 
co G 7 に ww ーー 





「console.log("Hello World!!):」 に 書き 換え た Web ペ ー ジ 


続い て 、 コ ン ソ ー ル を 表示 し ます 。Chrome の 場合 は 、 右 上 の 三 本 線 の アイ 
コン 時 を クリ ッ ク し 、 表 示さ れ た メニ ュー で [ツール] 一 [JavaScript コン ソー 
ル ] の 順に クリ ッ ク し ます 。 


円 さつき を 表示 する スケ リプ ト x 
0 の ーー テー me 末 本 
| 


| 
| 


| 
| 、 り 取 T) (<) lOR( の ) 
| ー 「100% 人 時 


名 前 を 付け て ペー ジ を 保存 (A)... Clrs 
Cri+F 





CKn+P 


ァ ブ ウー ショ ン の ショ ー ト カッ ト き 作成 (S) 
打電 機 般 (E) 
タス 2 マネ ー ジ ャ (T) 





Chrome で コ ソソ ー ル 画面 を 表示 


[TavaScript コ ン ソ ー ル ] を クリ ッ ク す る と 、 次 の よう に 下部 に コン ソー ル が 
表示 され ます 。[「Hello World」 と 値 が 表示 され て いる こと を 確認 し て くだ さい 。 
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軸 あい さっ を 表示 する スク リプ ト  x 軸 還 
6 fle:///C:/work/list4_2.html 。。 








gements 。 Reourodr Netwerk 5ourows Timeine Profex Audts 上 Qoeaolei 
He11o or1d1! ! 


この 部 分 が 
コシ ソー ル 





口 = Q ぐ <topframe> Y 紀 防 | Errors Warnincs Loes Debug 4 


Chrome の コン ソー ル 画 面 


コン ソー ル が 表示 され な い 場 合 は 、 画 面 左下 の 右 か ら 2 番 目 の ア イコ ン を ク 
リッ ク し て くだ さい 。 





店 


We コン ソー ル を 表示 する た め に 毎回 = を クリ ッ ク し メニ ュー を た どる の は 面 
倒 、 と いう 場合 は ショ ー ト カッ トキ ー を 利用 し まし ょ う 。Web ペ ー ジ を 表 
示し た 状態 で 、 キ ー ボ ー ド の TWO + [Shift] + J ba コン ソー 
ル を 表示 で きま す 。 


WeA JavaScript を 外部 ファ イル に 記述 し て いる 場合 も 、 同 様 に コン ソー ル を 利 
用 で きま す 。 た と えば 、 以 下 は 75 ペ ー ジ で 作成 し た sample.jS の 内 容 を 
「console.log('Hello Worldl! り :」 に 書き 換え 、 ブ ラウ ザ で Web ペ ー ジ と コン ソー 
ル を 表示 し た 画面 | ) あいさつ を 表示 する スク リプ ト x " 


1 


NYCIEGD DU がい し cu 


He11o ior1d!! 
> 





ロロ > Q へ Q <iopframe> Y 師 了 』 | rrors wernines Loes Debee 
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章 基本 文法 


Internet Explorer 9 で Web ペ ー ジ と コ ン ソン ソー ル を 表示 する 場合 








@Web ペー ジ を 表示 する と き の 注 意 点 

Internet Explorer で ロー カル PC 上 に 置か れ た ファ イル (Web サー バー に アッ 
プロ ー ド され て いな い フ ァイル ) を 実行 する 場合 、 次 の よう な 確認 メッ セー ジ が 
表示 され ます 。 


本 3 天 > て:wworkwiist4_2.html お で 9 かさ つ っ を 表示 する スク タプ ト 。 X 


ーー ニーーーーーーーーーーーーーーーーーーー 


この Web バー ジ は スク リプ ト や ActiveX コ ン | Tn2T 「 
トロ ー ル を 実行 し な いよ うに 制限 され て いま す 。 | プロ 2A れ て いる コッ テン 9 を 許可 (A) | 


Internet Explorer 9 の 確認 メッ セー ジ 


これ は Web ペ ー ジ 上 で JavaScript な ど を 実行 する 場合 に 表示 され る メッ セー 
ジ で す 。JavaScript を 実行 する に は [ブロ ッ ク さ れ て いる コン テン ツ を 許可 (A)] 
を クリ ッ ク し て くだ さい 、。 今後 この メッ セー ジ が 表示 され な いよ うに する に は 、 
次 の 設定 を 行ない ます 。 


⑩ Internet Explorer の 右上 に ある 記 を クリ ッ ク し て [イン ター ネッ ト オ プ 
ショ ン (0)] を クリ ッ ク 。 











# あい さっ を 表示 する スク リプ ト 。 ※ 
| 即 穫 (?) 

プア イル (P) 

衝 大 (Z) (100%) 

セー プティ (S) 

サイ ト を スタ ー ト 画 遼 に 造 加 (1) 

ダウ ン ロ ー ド の 本 示 (N) Cri+〕 

アド オン の 管理 (M) 

F12 開発 者 ウー ル (し ) 

| ビン 科 め サイ ト (G) 


、 あの 








の 「 詳 細 設 定 ] タブ で [マイ コン ピュ ー タ ー の ファ イル で の アク ティ ブ コ ン テ 
ン ツ の 実行 を 許可 する ] に チェ ッ ク を 入れ る 。 


4.1 書き 方 の 大 本 


ULUC2 に EL Y | カカ 5 ム | 時 細 負 | 


ーーーー ーーーー ーー ーー 


| TLS 1.2 の 使用 A | 
層 サー バー の 証明 書 失 効 を 確認 する * | 
[y ダウ ン ロ ー ド し た プロ グラ ム の 圧 名 を 確認 する 

ネイ ティ ブ XMLHTTP サポ ー ト を 有効 に する | 
[ ] ブラ ウザ ー を 閉じ た と まき 、 [Termporary Internet Files] フォ ル ダ ー を る | 
層 机 コン ュー ター で の 、CD の アク テ ブ コン テン ツ の 実行 を 許可 する * 
に “ デイブ コン テン ツ の 催行 を 許可 する 


[] 時 5 化 STK バ ジ を ティ スク に 保存 し な い 

[] 術 随 保護 モー ド を 有効 に する * 

|] 版 恋 な P3P 検証 を 有効 に する * 

[ ] 署名 が 無効 な 場合 で も ソフ トウ ェ ア の 実行 また は イン スト ー ル を 許可 する 
[ 六 証明 書 の アド レス の 不一致 に つい て 警告 する * 

常に Do Not Track の も 送信 する * 


| wm 人 の いあ つこ NM 区 tm ーー 4mK チャ 
1 1 7 K 3 bad A に 』 * か 











Internet Explorer の 設定 を リヤ セット 
Internet Explorer の 設定 を 展 定 の 状態 に リヤ セット し ます 。 | リト (S)、 


まう | 


ブラウ ザー が 不安 定 な 状態 に な っ た 場合 に の み 、 こ の 設定 を 使っ て くだ さい 。 





yy セル | | 電 和 AO | 





以上 で 設定 は 完了 で す 。 


@ コ ン ソ ー ル の 利用 

Web ペ ー ジ を 表示 し た 状態 で 、 キ ー ボ ー ド の 【[F12] キー を 押す と 、 画 面 下 
に 帯状 の 枠 が 表示 され ます 。 以 下 の よ うに 「 コ ン ソ ー ル 」 タブ を クリ ッ ク す る と 、 
コン ソー ル が 表示 され ます 。 コ ン ソ ー ル に 「Hello World!!」 が 表示 され な いと き 
に は 、 ブ ラウ ザ 上 部 の @ を クリ ッ ク し て ペー ジ を 最新 の 状態 に し て くだ さい 。 


| @ さっ を 表示 する スケ リト 


に に 更新 (F5) 


上 光生 9 科 0」 間 (FOO 
織 ブラ ウザ ー モー ド : IE10(B) ドキ ュ メ ント モード: 標準 () - ロ ] x 
_HTML CSS | や ー ル | スク タプ ト アイ ラー ネッ トワ ー ク 


N 展 


He11o Mor1di! ー 


p 
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@ 敵 間 DD {| t{〔{〔t〔t%560) 〔 ひ の 0 の 〈 〇 ぴ 』t〈tI 〔wW… 


p JavaScript は 半角 の 英 数 字 と 記号 の み で 記述 する 。 
p 文字 列 を 扱う 場合 は シン グル クォート (' ) か ダブ ルク ォ ー ト (") で 囲む 。 
p JavaScript で は 大 文字 と 小文字 は 別 の 文字 と し て 扱わ れる 。 
py 命令 文 の 未 尾 に は セミ コロ ン (:) を 付け る 。 

p 複数 行 の 命令 群 を 波 か っ こ { } で 囲み 、 そ れ を ブロ ッ ク と 呼ぶ 。 









detsid:ee ccir 二 | 


Q⑳ 1 JavaScript を HTML ファ イル に 直接 記述 する 場合 、 な ん と いう タグ の 


中 に 記述 し ます か ? 


Q⑩2@「 こ ん に ち は 」 と いう 文字 を ダイ アロ グ ボ ックス に 表示 する に は 、 ど の よ 
うな 命令 を 記述 し ます か ? 





つ 解 答 は 巻末 に 掲載 





で は 、TavaScript で スク リプ ト を 記述 する と き に 必要 な 知識 を 学ん で いき ま 
し ょ う 。 パ ソコ ン で は 、 文字 や 数 値 、 記 号 な ど 、 さ まぐ ざま 情 報 を デー タ と し て 
扱い ます 。 TavaScript な ど 、 プ ログ ラミ ング 言語 で は 、 こ の デー タ を 使っ て い 
ろ い ろ な 処理 を 行ない ます 。 

代表 的 な 処理 と いえ ば 計算 で す 。 た と えば 、 人 間 が 1 か ら 10 ま で の 合計 値 を 
暗算 で 求め る 場合 、 頭 の 中 で どの よう に 計算 する で し ょ うか ? 


eo 


ンー デーーーー ーーーーー 
4 9 + 3 は 6 > 6+ 4 は 10 


の 61 1 5 
6 1+2 は 3 ) ら 6 








uu 


( 〇 ② 
0 
/ 1 から 106 ま で の バ YO ) 計算 た い へ ん 
、 数 値 を 足し た 合計 は ? ノ 9 そう だ ね ・・・ 
Ne りら ッッ 3 
着 ap 
複雑 な 暗算 は た い へ ん ! 


まず 1+2 の 結果 を 求め 、 そ の 結果 に 3 を 足し 、 さ ら に その 結果 に 4 を 足 
し ・・・、 と いう よう に 、 途 中 の 計算 結果 を いっ た ん お ぼ え て 、 そ こ に 次 の 数 
値 を 加算 し て いく で し ょ う 。 

JavaScript で 計算 を 行なう 場合 も 同様 に 、 途 中 の 計算 結果 を どこ か に お ぼ え 
て お く 必 要 が あり ます 。 TavaScript が デー タ を お ぼ え る と き 、 実 際 は パソ コン 
の メモ リ と いう 装置 に デー タ を 記憶 し て いま す 。 
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1 二 2 は 3 
3 十 3 は 6 


一 時 的 に 記憶 する 場所 


メモ リ が デー タ を 記憶 で きる 領域 は と て も 広い の で 、 そ の 中 で デー タ を 個別 
へ ん すう 
に 管理 する た め に 、 領 域 の 一 部 を 場所 取り し て 名 前 を 付け ます 。 こ れ が 変数 で 
す 。 変数 と は 、 メ モリ 上 に 作ら れ た デー タ を 人 入れ る た め の 小 さ な 箱 の よう な も 
の で す 。 


メモ リ 全 体 


広い 範囲 の うち 、 使 う 部 分 に 凍 
名 前 を 付け て 場所 取り する 譜 





9 変数 の 宣言 


変数 を 利用 する た め に は 、 ま ず 宣 言 を 行なう 必要 が あり ます 。 宜 言 と は 、 変 
数 に 名 前 を 付け て 、 利 用 の た め の 準 備 を する こと で す 。 宣言 は 一 度 だ け 行 な い 
ます 。 同 名 の 変数 を 何 度 も 宣言 する こと は で きま せん 。 








が 交 数 宣言 
var 変数 名 変数 名 の 前 に 半角 スペ ー ス を 入れ る 


Var 変数 1/ 変数 2 ・・・, 複数 の 変数 を 宣言 する 場合 は カン マ で 区 切る 





層 記述 例 


8 エエ ズ 》 


(2 誠 は 


変数 宣言 を 省略 する と 通常 の 変数 で は な く な る ! 


実は JavaScript で は 、 宣 言 を し な く て も 変数 を 利用 で きま す 。 変 数 宣言 を 省略 
する と 、 通 常 の 変数 と は 異な る 種類 の 変数 に な り ま す 。 詳し く は 第 6 草 で 説明 し 
ます 。 





Ki 変数 の 病名 規則 

変数 に は 、 自 由 な 名 前 を 付け る こと が で きま す 。 た だ し 、TavaScript の 予約 
語 と 同じ 名 前 に は で きま せん 。 読 みや すい スク リプ ト に する た め に 、 な ん の 
デー タ を 扱う 変数 な の か が 推測 し や すい 名 前 に し まし ょ う 。 た と えば 、 人 金額 の 
デー タ を 扱う 変数 で あれ ば 「money」 や |「price」 な ど が 良い で し ょ う 。 


HMI oe yt 0 buN 4 プ : く gg 調 w3] < 0 KM AS まう (ChYCTO YO CS か RIkD み 6 ! : KK CS 49 が 
た 作れ 1 H I に i H 則 iT 0) と す 4 MSA る 1 % y 
lI KA [ MI / い DL 了 1 まだ 6 + 1 1 
4 『F 4 | 1 し 


敵 予約 語 と は 、JavaScript で あら か じ 紗 用 意 され て いる 単語 の こと で す 。 以 
下 の 予 約 語 一 覧 の 名 前 は 変数 名 に 使え な い の で 気 を つけ まし ょ う 。 


beak | |W |swwem leeer 
『 












we [CS 





また 、 以 下 の 単 語 は 将来 的 に 予約 語 に され る 可能 性 が ある も の で す 。 こ れ ら 
も 使用 し な いよ うに し まし ょ う 。 寺 0 


debugeer |doube |ewum |eeort |edends |fml | 
foat |aolo | mpemens mpot |imt 。 |mereoe_ 
Hong | nave | packags | prvate | protected lpupio 
won | se |super | ymowomgsl nrows | ransent | 
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大 文字 と 小文字 は 別物 


emo ーー ニ ーー テー デー ーーーー ーーー ーーー 


JavaScript で は 、 大 文字 と 小文字 は 異な る 文字 と し て 認識 され ます 。 そ の た め 、 
た と えば 、 変 数 「a」 と 変数 「A]」 は まっ た く 別 の 変数 に な り ま す 。 


0 変数 へ の 値 の 代入 


変数 の 中 に 値 を 入れ る こと を 代入 と 呼び ます 。 変 数 が 持て る 値 は 1 つ だ け な 
の で 、 代 入 を する た びに 値 が 上 書き され ます 。 


が 代入 


JavaScripot に お ける = は 、 算数 の = と は 意味 が 異な り ま す 。 JavaScript の = 
は 左辺 と 右辺 が 等 し いと いう 意味 で は な く 、「 右 辺 を 左辺 に 入れ る 」 と いう 意味 
ぐす 院 的 | 3 時流 23 の 「 ' 











リス ト 4.3 は 、 変 数 に 対し て 数 値 を 代入 する 例 で す 。 変数 a に 10 を 代入 し た 
後 で 20 に 上 書き し て いる の で 、 最 終 的 に a の 中 に 入っ て いる 値 は 20 と な り ま 
に 


リス ト 4.3 変数 へ の 値 の 代入 





]avaScript は 上 か ら 順 番 に 実行 きれ る た め 、 こ の 例 が 実行 きれ る と 、 変 数 a 
の 内 容 が 次 の よう に 変わ っ て いき ます 。 


8 8 


1.a と いう 名 前 の 変数 が メモ リ 上 に 作ら れる 


す 


a = 10z 
2. 変数 a の 中 に 10 が 代入 され る 


す 


a = 20: 
3. 変数 a の 中 身 が 20 に 上 書き され る 





変数 へ の 値 の 代入 


K】 変数 の 初期 化 
変数 の 宣言 と 代入 は 、 同 時 に 行なう こと も で きま す 。 
se が る 初期 化 


var 変数 名 = 値 


一 記述 例 


8 XX = 0 





この よう に 宣言 時 に 値 を 代 人 する こと を 初期 化 と 呼び ます 。 変数 宣言 の み で 
初期 化 を 行なわ な い 場合 、 変 数 の 中 に は 初期 値 と し て undefined と いう 特殊 
な 値 が 入り ます 。undefined に 対し て 計算 な どの 処理 を 行なう こと は で き な い 
た め 、 変 数 を 計算 な ど に 利用 する 場合 は 必ず 先 に 値 し 入れ て お きま す 。 


⑫⑳) 変数 の 表示 


変数 の 中 身 を 表示 する に は 、 リ スト 44 の よう に 、console.log や alert の 丸 
か っ こ ( ) 内 に 変数 名 を 指定 し ます 。 実行 時 に は 変数 の 中 身 が 表示 され ます 。 リ 
スト 45 の よう に 、 変 数 名 を ダ プ ルク ォ ー ト (") も し く は シン グル クォート () 
で 囲 むと 、 囲 まれ た 男 囲 は 単純 な 文字 列 と な り 、 変 数 名 が その まま 表示 され て 
し まい ます 。 
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* 人 。 


リス ト 4.4 変数 の 中 身 の 表示 


ず &Y 8 = 10 


congo1e.1oqd(a) : 





四球 





リス ト 4.5 変数 の 中 身 の 表示 (誤っ た 例 ) 


8Y 8a = 10, 
console.1od("a"): 





因果 





テ 変数 名 は 囲ま な い ! 


ーーーーーーーーーーーーーーーーーーー 


変数 の 中 身 を 表示 し た い 場 合 は 、 変数 名 を ダブ ルク ォ ー TWAJ 0 グル ク ォ ー 
0 で 囲ん で は いけ ませ ん 。 


2) デー タ 型 


デー タ 型 と は 、 変 数 に 入っ て いる デー タ の 種類 の こと で す 。 た と えば 、 文 字 
列 と 数 値 は 、 異 な る 種類 の デー タ 型 に なり ま す 。 デ ー タ 型 が 異な る と 、 実 生 
きる 処理 内 容 も 異な り ま す 。 文 字 列 型 の デー タ に 対し て は 文字 列 の 検索 や 置換 
な どの 処理 が で きま すし 、 天 値 型 の デー タ は 計算 処理 に 利用 で きま す 。 











文字 列 崖 の \ や . な ご の 記号 を 岳 入 数 値 型 の S% 加算 し て 
1000 し て 金額 表記 に する 1000 税込 金額 を 求め る 


"\1.000" 軌 季 夏 刺 1050 





テー タ 型 は さま ざま な 処理 を 可能 に する 


JavaScript に は 、 表 4.1 の よう な デー タ 型 が あり ます 。 





表 4.1 JavaScript の デー タ 型 















シン グル クォート () また は ダブ ルク ォ ー ト (") で 囲ま れ | 
- た 文字 の 並び 。 全 角 文 字 も 扱う こと が で きる 「 


数 値 
以下 の 2 つの うち どちら か が の 値 
・ 真 (条件 を 満た す )、 正 し い (等 し い )、 は い 、YES 等 の 
意味 を 持つ 「true」 
・ 偽 (条件 を 満た さ な い )、 正 し く な い (等 し く な い )、 い い 
え 、NO 等 の 意味 を 持つ 「false」 


複数 の デー タ の 集合 体 | 
連想 配列 
オブ ジェ クト (第 7 章 ) が 存在 し な いこ と を 表わす 特殊 な 
null 値 い 「 
" 人 4 ・ 0 「 
| 変数 が 初期 化 さ れ て いな い 、 あ る い は プロ バテ ィ (第 7 章 ) 
人 | 定義 され て いな いこ と を 表わす 特殊 な デー タ 型 
数 値 で な いこ と を 表わす 特殊 な デー タ 型 
TavaScript は デー タ 型 に つい て 厳密 な チェ ッ ク を 行なわ な いた め 、 数 値 型 の 
値 が 入っ て いた 変数 を 文字 列 型 の 値 で 上 書き する 、 と いっ た 処理 も 問題 な く 実 
行 で きま す 。 
















p スク リプ ト 中 で 扱う デー タ は 変数 に 入れ る 。 


p 変数 に 入れ る デー タ の 種類 の こと を デー タ 型 と 呼 点 。 





| Hetcigdie に 1 中 こ 


⑳ 1 以下 は 、x と いう 名 前 の 変数 を 宣言 する 文 で す 。 空 剛 に は な に が 入り ます 
か ? 


| _ Ilx: 


Q 変数 x の 中 身 を コン ソー ル に 表示 する に は 、 ど の よう な 命令 を 記述 し ま 
すか ? 
解答 は 巻末 に 掲載 
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⑳) 演算 子 と は 





演算 子 と は 、 な ん ら か の 処理 を 行なう 記号 の こと で す 。 TavaScript に は 、 さ 
さん じゅ つ ひ 
ま ざ ま な 演算 子 が あり ます が 、 大 きく 分 け て 算術 演算 子 、 代 入 演算 子 、 比 較 演 
ろ ん り 
算 子 、 論 理 演算 子 の 4 種類 が あり ます 。 








VAaY A (mw) 10 (+) 20) 
Ate デ も (Aa (Cc) 550 ) 7 


alert (a<50 (8) a > 20 ): 
Fwaheee SS (2 つの 条件 式 を つなげ る ) 


ここ で は まず 、 共 本 的 な 演算 子 で ある 算術 演算 子 、 代 入 演算 子 の 2 つ に つい 
て 学び 、 残 る 比較 演算 子 、 論 理 演算 子 に つい て は 第 5 章 で あら た め て 取り 上 げ 
ます 。 


⑫⑳) 算術 演算 子 


算術 演算 子 は 、 計 算 を 行なう 演算 子 で す ( 表 4.2)。 








表 4.2 JavaScript rm 
演算 子 使用 例 


ROOTー9082H32808RKLHNW 了 2 


Hello" 填 "World" | "HelloWorld" 


0 80ICN2N 
ーー 


_ | 数 値 の 剰余 (除算 の 余り ) 





十 演算 子 は 、 計 算 対 象 の デー タ 型 に 応じ て 処理 内 容 が 変わ り ま す 。 ど ちら か 
片方 で も 文字 列 で あれ ば 、 結 果 は 2 つの 値 を 連結 し た 文字 列 と な り ま す 。 

た と えば 、 リ スト 46 の ⑯⑩ と は 、 一 見 同じ よう に 見 える 計算 処理 で す が 、 
デー タ 型 の 人 違い に よっ て まっ た く 異 な る 実行 結果 に な り ま す 。 


リス ト 4.6 + 演 算 子 の 挙動 の 違い 


Var xx 123 + 456, 一 一 ーーーーーーーー⑯ 
yar Y = "123" + "456" ゆ が ーーーーーー 





congso1e.1oq(X) : 
con8ole.1oqd( ツ ) 





また 、「%」 演算 子 に よる 剰余 算 は 、| ある 数 値 で 割り 切れ る か どう か 」 を 詩 
べ る 際 に よく 使わ れ ま す 。 た と えば 、「x % 2」 と いう 計算 式 を 実行 する と 、x 
が 偶数 で あれ ば 0、 人 樹 数 で あれ ば 1 が 求め られ ます 。 


複合 代入 演算 子 


覆 合 代入 演算 子 は 、 変 数 に 対し て 計算 と 代入 を 同時 に 行なう 演算 子 で す ( 表 
43)。 








表 4.3 複合 代入 演算 子 
説明 使用 例 結果 (a の 値 ) 


左辺 の 値 に 右辺 の 値 を 加算 し た も の を 代入 | 9 





Pear 変数 か ら 1 減算 する ( デ ク リ メン ト ) 
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複合 代入 演算 子 は 、「 変 数 = 変数 + 値 ] と いう 形 の 式 を 省略 する た め の 演 
算 子 で す 。 リ スト 4.7 と リス ト 48 の 演算 子 は 、 い ずれ も まっ た くく 同じ 処理 を 行 
な っ て いま す 。 


リス ト 4.7 演算 子 に よる 加算 


ar 8a = 10』 


a =a+ 5』 // (a+5) は (10 + 5) な の で 、a の 値 が 15 で 上 書き され る 
console.1oqd(a) 





リス ト 4.8 + ニ 演算 子 に よる 加算 


Yar a = 10』 


a += 5: / / a の 値 に 5 加算 され て 15 に な る 
conso1e.1oqd(a) 





上 結果 リス トス フ ・ リ スト 48 





また 、 リ スト 4.9 か ら リ スト 4.11 の 演算 子 は 、 い ずれ も 同じ 処理 を 行っ て いま 
す 。 


リス ト 4.9 + 演 算 子 に よる イン クリ メン ト 


Var 8a = 10》 


aa = a+ 1: // (a+1) は (10 + 1) な の で 、a の 値 が 11 で 上 書き され る 
conso1e.1oq(a) 





リス ト 4.10 += 演 算 子 に よる イン クリ メン ト 


ar 8a = 10』 
a += 1 // a の 値 に 1 加算 され て 11 に な る 


congso1e.1oqd(a) : 








リス ト 4.11 ++ オ 演算 子 に よる イン クリ メン ト 


び &Y a = 10』 
コキ 5 // a の 値 に 1 加算 され て 11 に な る 
conso1e.1od す (3) 





還 実 行 結果 リス ト 4.9・ リ スト 4.10・ リ スト 4.11 





_W HeTsid: 才 Mc) 暗く 


⑳ 1 以下 の スク リプ ト を 実行 し た 結果 、 変 数 x に 代入 され る 値 は な ん で す 
か ? 


Mr sa の 細め 居 記 NbAt19io 培 MNT07 


Q⑳2 以下 の スク リプ ブ ト を 実行 し た 結果 、 最 終 的 に 変数 y に 代入 され る 値 は な 
ん で すか ? 


Var = 10: 
Y 生き 
Y++』 





ご 解答 は 巻末 に 掲載 
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⑳) 配列 と は 


42 節 で 、 変 数 に 入れ る こと の で きる 値 は 1 つ だ け だ と いう こと を 学び まし 
に 。 で は 、100 件 の デー タ を お ぼ ぽ え て お きた いと き は 変数 を 100 個 官 言 し な けれ 
ば ならない の で し ょ うか ? 考え る だ け で うん ざり し て し まい ます ね 。 こ の よ 
うな と き に 利用 する の が 配列 で す 。 配 列 と は 、 同 じ 用 途 で 用 いる 複数 の 変数 を 





1 つ に まとめ た も の の こと で す 。 








P 
DETORT 


リリ 
MDV Wi 


%⑳ う ) 配列 は 要素 の 集合 価 


配列 は 変数 の 集まり に よっ て 構成 され ます 。 個 々 の 変数 の こと を 要素 と 呼び 
ます 。 各 要素 を 識別 する た め に 、 イ ン デ ックス と 呼ば れる 番号 (0 か ら 始 まる 
各 数 値 ) が 割り 振ら れ ま す 。 イ ン デ ックス は 添え 字 と も 呼ば れ ま す 。 













| | アバ ー ト の 部 屋 に 部 屋 番 
衣 l 号 が 割り 振ら れる よう に 





0 光 溢 回 証 BC 中 に も イン デック ス 
0 番目 1 番目 2 番目 3 番目 
の 要素 の 要素 の 要素 の 要 素 






IIU 台 和 M 間 9 
In 因 ) 
伯 NNLON 
1 AA O 













交 数 の 集まり で ある 配列 は 、 部 屋 の 集まり で ある アバ ー ド と 償 て いる 


ED CNT さっ 


配列 の イメ ー ジ 


⑳) 配列 の 書き 方 


K3 配列 の 宣言 
配列 の 宣言 は 、 変 数 と 同じ よう に yvar を 使い ます 。 角 か っ こ [] 内 に は 、 要 素 
に 代入 する 値 を カン マ 区 切り で 指定 し ます 。 











配列 の 宣言 と 初期 化 
Yar 配列 名 = [ 値 1, 値 2, 値 3 ・・・ 1 





配列 は 角 か っ こ [ ] で 要素 を 囲む | 


リス ト 4.12 の よう に 宣言 と 初期 化 を 行なう と 、 要 素 3 つ 分 の 配列 が 作ら れ ま 
本 


リス ト 4.12 配列 の 初期 化 
Yar number = [ 10, 20, 30 ]』 
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humber 
配列 の イメ ー ジ 


K3 要素 の 参照 
配列 内 の 要素 を 参照 する に は 、 要 素 の イン デック ス を 指定 し ます 。 


Ws 要素 の 参照 
配列 名 [イン デック ス ] 






リス ト 4.13 で は 、 配 列 number 内 の 1 番目 の 要素 を 指定 し て いる の で 、20 が 
表示 され ます 。 


リス ト 4.13 配列 要素 の 参照 


Var numDper = [ 10, 20, 30 
conso1e.1oq (number [1 ) : 


イン デック ス 1 な の で 、1 番目 の 要素 





スク リプ ブ ト の 実行 イメ ー ジ 








イン デック ス は 0 か ら 開 始 する 数 値 で す 。 ] か ら の 開始 で は な い の で 気 を つけ ま 
し ょ う 。 初 め て だ と わか り に くい の で す が 、1 つづ 目 の 要 素 は 0 番目 (= ニ イ ン デ ッ 
クス 0)、2 つ 目 の 要 素 [ 
は 1 番目 (イン デック ス 
1 












通常 の 数 え 方 と 異な る 点 
に 注意 し て くだ さい 。 紀和 きき 工 アン デック ス 0 <- 
本 きき 華 アン デック ス 1 < 
イン デック ス の 数 え 方 馴 幼 上位 イン テッ クス < 
K】 要素 へ の 代入 


各 要 素 に 対し て 、 個 別に 値 を 代 人 で きま す 。 


ms 要素 へ の 代入 
配列 名 [イン デック ス ] = 値 : 





リス ト 4.14 で は 、1 番目 の 要素 の 値 を 上 書き し て いま す 。 


リス ト 4.14 配列 要素 へ の 代入 


Var numDber = [ 10, 20, 30 ]: 
number[1] = 50z 
conso1e.1oq (number [1 ) : 





男 実 行 結果 





k3 要素 の 追加 

配列 内 に 存在 し な い イ ン デ ックス を 指定 する こと で 、 要 素 を 追加 する こと も 
で きま す 。 リ スト 4.15 は 、 イ ン デ ックス に 3 を 指定 する こと で 、3 番 目 の 要 素 を 
新た に 生成 し て いま す 。 
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人 


リス ト 4.15 イン デック ス の 指定 


ar numDer E ま 和 の 。 20。 309 』#』 
number [3] 99 
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スク リブ ト の 身 行 イメ ー ジ 


要素 を 追加 す る と き 、 イ ン デ ックス は 連続 し た 番号 で な く て も か まい ませ 
ん 。 リ スト 4.16 の よう に 離れ た イン デック ス を 指定 する と 、 途 中 の 番号 が 欠番 
と な り ま す 。 


リス ト 4.16 離れ た イン デック ス の 指定 


Ya number = [ 10, 20, 30 ]』 
number[9] = 99。: 


humber 





スク リプ ト の 実行 イメ ー ジ 


配列 の 要素 に 指定 する 値 が 最初 か ら 決 まっ て いな い 場 合 は 、 ま ず 空 の 配列 を 
作っ て お いて 、 後 か ら 要 素 を 追加 し て も 良い で し ょ う 。 リ スト 4.17 で は 、 リ ス 
ト 412 と まっ た く 同 じ 配 列 を 生成 し て いま す 。 


リス ト 4.17 空 の 配列 の 作成 


var number = [ ]: // 空 の 配列 の 作成 
number [0] 1 0 
number [1] 20』 
number [2] 30』 








要素 数 の 取得 | 
配列 名 の 後ろ に .length を 付け る と 、 配 列 が 保持 する 要素 の 数 を 表わし ます 。 


文法 要素 数 の 取得 
配列 名 1ength 。 






厳密 に は 最大 イン デック ス + 1 を 表わす の で 、 リ スト 4.16 の よう に イン デ ッ 
クス に 欠番 が ある 場合 は 、 要 素数 で は な く な り ま す 。 


リス ト 4.18 配列 の 要素 数 の 取得 


Yar numDber = [ 10, 20, 30 ]』 
conso1e.1oq (number . 1enqdth) 





が (TNIUUYDUUNbDV NWA AA NG ETUI LU ANU EAIULUWTNM WU 。 MV MUUUUPUI AN 
し Ce 1 『 「 1 _ DTI ず 1 jj J 」 1 _ 1 

1) WN り NN M り 』 U 1 「| 

VA MeU UE ) - 記 eU - 

My TKD 必 い YU ル 7 1 

2 OGA UBS 1 


ー 次 元 配 列 


配列 の 集合 体 を 二 次 元 配列 と 呼び ます 。 リ スト 4.19 は 、2 つ の 配列 を 要素 と 
し た 二 次 元 配列 で す 。 小 さい 配 列 が 大 きい 配列 の 中 に 入っ て いる 構造 を イメ ー 
が も て そる だ さき いい 。 











リス ト 4.19 二 次 元 配列 


Y& と number = 【[ 【 10 ,。 20 , 30 ] , 【 40 , 50 , 60 ] ]』 
conso1e.1oq (number [0] [0] ) : 
conso1e.1oq (number [0] [11 ) : 
congo1e.1oqg (number [0] [2] ) : 
congso1e .1og (number [1] [0] ) : 
congso1e.1oq (number [1] [11] ) : 


congo1e.1og (number [1] [2] ) : 














閣 " DU 貞 敵 
DD 





number 
二 次 元 配 列 の イメ ー ジ 


さら に 角 か っ こ [] を 入れ 子 に する こと で 、 三 次 元 、 四 次 元 の 配列 を 作る こと 
も で きま す 。 し か し 、 あ まり 階層 が 深く な る と 読み づら い ス クリ プ ト に な っ て 
し まう た め 、 二 次 元 程度 に お さえ て お く の が 現実 的 で し ょ う 。 


似 た よう な デー タ を 大 量 に 扱う 場合 は 配列 に 入れ る 。 
配列 の 初期 値 は 角 か っ てこ [ ] で 囲む 。 


y 配列 の 要素 に は イン デック ス (添え 字 ) と 呼ば れる 識別 番号 が 
付け られ る 。 





還 heck 更 est 人 


⑳ 1 以下 の スク リブ ト を 実行 し た 結果 、 コ ン ソ ー ル に 表示 され る 値 は な ん で 
すか ? 


サエ TU も BB w PP の AO の みか が ん ツバ イナ ウブ ルリ 。 "が どう つり 。 バナ ナ 『 』】】 
congo1e.1og(fFruitg [21 ) 


9 る 以下 の スク リプ ト を 実行 し た 結果 、 コ ン ソ ー ル に 表示 され る 値 は 何で す 
か ? 





博 江 誠人 2 遇 0e0W ) が か ん WW だ の 大 才 9(。 
congole.1od(Fruitgs.1engdtb) 





ご 解答 は 巻末 に 掲載 
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⑳) 連想 配列 と は 


配列 と は 、 複 数 の デー タ の 集合 体 の こと で し た 。 仮 に 、 個 人 情報 を 管理 する 
配列 を 作成 し 、0 番 目 に は 名 前 、1 番 目 に は 住所 、2 番 目 に は 電話 番号 を 入れ て 
お いた と し ます 。 ス クリ プ ト 量 が 多く な る と 、 い ざ 配 列 要 素 の 値 を 参照 する と 
な っ た と き に 「 住 所 を 入れ て お いた の は 何 番目 だ っ け ? 」 と いっ た 混乱 が 起こ 
り が ち で す 。 

そん な と き に 利用 する の が 連想 配列 で す 。 連 相 配 列 は 、 数 値 の 代わ り に 意味 
の ある 文字 列 を イン デック ス と する こと で 、 各 要素 を 識別 し や すく する こと が 
で きま す 。 連想 配列 の 場合 、 イ ン デ ックス の こと を キー と 呼び ます 。 





』 | 部 屋 に 表札 を か ける と 中 に 誰が 
訓 | いる の か わか りや すく な る よう に 









| 要素 に 文字 列 の キー を 割り 当て る と 、 
| 中 に な に が 入っ て いる の か わか り 
』 や すく な る 


連想 配列 は 、 番 号 の 代わ り に 文字 列 で 要素 を 識別 する 。 ア パート の 四 
6 屋 番号 の 代わ り に 表札 の 名 前 を 見 て 部 屋 を 訪ね る よ つ な イメージ 


連想 配列 の イメ ー ジ 





3 連想 配列 の 宣言 と 初期 化 
連想 配列 の 要素 は 、 キ ー と 値 の セッ ト で 1 つと し て 扱わ れ ま す 。 全体 を 囲む 
の は 、 角 か っ こ [ ] で は な く 、 波 か っ こ | | で ある こと に 注意 し て くだ さい 。 


8、 加 相 西 ロ 下 の 宣言 と 初期 化 
var 連想 配列 名 = キー1 : 値 1。 キー2 : 値 2, キー3 





リス ト 4.20 で は 、3 つ 分 の 要素 を 持つ 連想 配列 を 作成 し て いま す 。 


リス ト 4.20 連想 配列 


var favorites = { 
food : “カレー%/ 
Color : 『" 青 『。/ 
number : 7 





favoriteSs 
スク リプ ト の 実行 イメ ー ジ 


初期 化 時 に キー を ダブ ルク ォ ー ト も し く は シン グル クォート で 凍 む と 、 全 角 
文字 も 使え る よう に な り ま す 。 


リス ト 4.21 連想 配列 の 初期 化 


var favoriteg = { 
WW 食べ物" ・ W カ レー"/ 


UE:: 和 LU ・ り 署 し 
数字 " : 7 





3 要素 の 参照 
連想 配列 内 の 要素 を 参照 する に は 、 ド ッ ト (.) また は [ ] で キー を 指定 し ます 。 


so 可 素 の 参照 
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※ シ ング ルク オォ ー ト で も 可 


上 記 は どちら も 同じ 処理 を 行ない ます が 、 角 か っ こ [] を 使う 方 法 の 場合 、 
キー を 変数 に 入れ て 扱う こと が で きま す 。 


リス ト 4.228 ドッ ト (.) を 使っ た 要素 の 参照 


var favorites = { 
food : "カレ ー『。 
Co1or : " 家 『。/ 
number : 7 


Con8ole.1od(favoritegs .fFood) 
Con8o1e . 1Od (FaVO エ 1teS .CO1O エ ) : 
Con8ole.1oqd (Favor1tes .numDber) 








リス ト 4.23 角 か っ こ [] を 使っ た 要素 の 参照 


var favoriteg = { 
Eood : "カレ ー『"。/ 
Color : 『 家 『/ 
numDer : 7 


} 7 


conso1e.1og(fFavoriteg [ "Food"] ) 』 


var key = "Food": / / キー を 一 度 変数 に 入れ る 
Con8ole.1odg(faVoriteg [Key] ) 








3 要素 へ の 代入 
連想 配列 も 配列 と 同様 に 、 要 素 が 持つ 値 を 上 書き で きま す 。 ま た 、 連 想 配 列 


内 に 存在 し な い キ ー を 指定 する こと で 、 要 素 を 追加 で きま す 。 


リス ト 4.24 連想 配列 へ の 要素 の 追加 


var favoriteg = { 
Food  : 『 カ カレ ー『 
Co1or : 『 家 『/ 
number : 7 


Favoriteg 。8portg = "サッ カー『』 要素 が 追加 され る 
con8o1e . 1od ( FaVOr1teS . SDOr8) 





favorites 
スク リプ ト の 実行 イメ ー ジ 


y 連想 配列 の 初期 値 は 波 か っ こ { } で 囲む 。 


y 連想 配列 の 要素 に は キー (要素 名 ) を 付け る 。 
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」 ト WWWN ォ 人 あま た JE NL ろり し は 。 も まあ どら ん 
NTWWWNNMWYWNWNWWWWF IMNWANNIYNTYWWYN yhD 邊 4 LE 

0 M ] h MY か 1 ル t パ 0 い 
WW 94 笛 か YY 


この 章 の 到達 度 チ ェ ッ ク 


Q1 同一 ディ レク トリ 内 の JavaScript ファ イル 「sample.jS] を HTML ファ 
イル に 読み 込む に は 、 ぐ script> タ グ を どの よう に 記述 すれ ば 良い で す 


か ? 
⑳@⑳ 以下 の スク リプ ブ ト を 実行 し た 結果 、 コ ン ソ ー ル に 表示 され る 値 は な ん で 
すか ? 
ザ & ア エエ = 10。 Y = 205 
X = 2 
Y = XX》 


congol1e.1oq(y) : 


QQ 以下 の スク リブ ト を 実行 し た 結果 、 コ ン ソ ー ル に 表示 され る 値 は な ん で 
すか ? 


V&Y XX = 10』: 
X += "100j 
conso1e.1oqd(X) : 


⑳ 全 コン ソー ル に 「50」 と 表示 する に は 、 空 欄 に な に を 記述 すれ ば 良い で す 
か が ? 


VS UDG mL 【10。 20],。 【30/ 40/ 50。 60】。 【70。 80。 90】 1]。 
console.1og(number| |): 


⑳5 連想 配列 で は 、 イ ン デ ックス の こと を な ん と 呼び ます か ? 


⑳@ 以下 は 、 コ ン ソ ー ル に 「 山 田 太郎 」 と 表示 する スク リプ ト で す 。 空欄 に 
は な に が 入り ます か ? 


var uSer = { name : "山田 太郎 "。 age : 25, height : 170 }: 
console.1og(user.| |): 


Q⑩7 以下 は 連想 配列 の 宣言 と 初期 化 を 行なう スク リプ ト で す が 、 一 部 間違っ 
て いる 箇所 が あり ます 。 ど こ で し ょ うか ? 


V&Y DrOF1 ユ Le = 【[ heiqht : 170。 we1iqht : 60 ],: 


ご 解答 は 巻末 に 掲載 


制御 構 文 





で 殺 貞 どど 
f 文 

Switch 文 

while 文 

for 文 

for-In 文 

繰り 返し の 制御 











と る Em W に Wi | 符 MC WI LA と) 電導 ) 7 4 
T'*xl 昌 MHRHRHHHHHHHHHHHEHEHTHHHHI 


但 スク リブ ト に は 3 通り の 進み 方 が ある 倫 


ゆー 本道 を まっ すぐ 進む ② 分かれ道 で 進路 を 変え る 





② 同 じ 道 を ぐる ぐる まわ る この 3 つ は 、 スク リプ ト が 
(繰り 返す ) 実行 され る 流れ 」 で す 。 
この うち "分岐 」 と 「 反 復 」 を 実現 する 
全 令 文 を 制御 構文 と 呼び ます 


If、Switch 


Wall に 和 Sel 


制御 構文 を お ぼ え る と 、 で きる こと 
の 幅 が ぐっ と 広がり ます 





「 順 次 」 は スク リプ ト を 単純 に 上 か ら 順 に 実行 する こと で 、 第 4 章 で 学ん だ ス 
クリ プ ト は すべ て ご この 「 順 次 」 で し た 。 本章 で は 、 残 り の 2 つ で ある 制御 構文 
に つい て 学び まし ょ よう 。 
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分 時 処理 と は 


ゲー ム な ど で は よく 、 選 択 肢 に 応じ て その 後 の シ ナリ オ が 変化 する 、 と いっ 
た 仕組 み が あ り ま す 。 そ の よう に 、 あ る 条件 に 応じ て その 後 行なわ れる 処理 を 
ぶん き 
振り 分 ける こと を 分 岐 と 呼び ます 。 





分 岐 処 理 の イメ ー ジ 


]avaScript で は 、 分 岐 処理 を 実現 する た め の 構 文 (書式 ) と し て 計 文 が 用 意 
され て いま す 。 文 を 利用 する こと で 、 ユ ー ザ ー が どの オプ ショ ン ボ タン ( ラ 
ジオ ボタ ン ) を 選択 し た か を 判定 し 、 表 示さ れる コン テン ツ を 切り 替え る Web 
ペー ジ な ど を 作成 で きま す 。 


WS if 文 


1f (条件 式 ) { 
条件 を 満た す 場 合 に 実行 する 処理 
) e1ge { 


) 





条件 を 満た さ な い 場合 に 実行 する 処理 
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2 UE YTV ww か we ポ ストン アム ト ャ e ア ャ マス ロキ マキ ャ キル か キキ ヤキ ペペ ネ チ W ザ を キキ WM キ すず ik ませ 市 証 必ず 再 wiwm ネ WV WJ< た 1. 「 宣 _- も すす ヤ す 症 WW Fw _ WW 6 まさ wW ザ や \ ネギ > 『 

* NNiwW ャ キ ホ か WT NN IM 表 WNW PWM MA ネ \ W すき 生ま WW PA ゃ WW WNWM R W キネ - ト ボ WW NN WTN ま WWNNWWI WW も も.W WNWw WW ば WWNMN ネ まず im そ wWwrY 

re NMLWYi 2 WP を 4 IN * We ゴ WNW まま まあ 末 か 二丈 WWWF 上 ポ NWWWGWwN y # WW WW HE EN ER 用 まき 手 。 YihWNT NW や mW キキ る WW NWw ザ WWWWWMWWNWNWUNWTYmwwNW ま ず NWTI WT _ 
WNWWIW WW _ 。 W WNWA 5 _- _ まま で WW NWNWMWW ま ます かす MMNNW で Wnnmwwr - NYA て まま WW WWWWNWNNwMNYiw キ Y ' _- A# ォ ル W ポ WW ォ *# WM ポ 池 導 が 
AI 本 cgi 。 ns ー ィ ャ 、 WWWMNtNWN ま WWWNWWRNANNNWWMNWYWWAKNtEIPWNWWY も WNW ER * Y NNIiwwwdN ザ T パ ザル まま WWNWWNWYWWNYNMNMNNWNWNY 間 WWW ザ ギ ペ ポポ ゆ ポポ ャ ftWNNWWt キ た あか キヤ や M WW WANRW4 ず WWWN み ゆ YN ゃ _- 





じょう けん し 


条件 式 と は 、 条件 を 指定 し 、 か つ そ の 判定 結果 を 論理 値 (true/false の い ず 
れ か ) で 返す 式 の こと で す 。 こ の 条件 式 で 指定 し た 条件 を 満た す (true) 場合 と 、 
満た さ な い (false) 場合 と で 異な る 処理 が 実行 きれ ます 






false ( 偽 ) 


し ーー 
な お 、 条 件 式 の 条件 を 満た さ な い (false) 場合 に は な に も し な い 、 と いう 場 
合 は else キー ワー ド 以 降 を 省略 する こと も で きま す 。 


還 記 述 例 


4 1og ( "条件 を 満た す " ) : false の 場合 


} 
※ 較 の 部 分 は 省略 可能 


⑫ 条件 式 の 書き 方 


条件 式 は 、 比 較 演 算 子 を 使っ て 記述 し ます 。 








記 明 使用 例 結果 


em が / N / 。 = 
MM 6 、 | 左辺 と 右 も PA い 場 人 


Fm 辺り か さい は moe 


rm テー ro 
74eedxA ck 





リス ト 5.1 は 、 信 号機 の 色 の 状態 を 判定 し 、 再 で あれ ば 進み 、 そ れ 以 外 の 色 
で あれ ば 止ま る よう に 処理 を 分 岐 す る スク リプ ト で す 。 


リス ト 5.1 f 文 の 利用 


< !DOCTYPE html> 
<html lanqd="]a リ "> 
<head> 
<meta Char8e ヒ ="utf-8 リ "> 
< 上 1 上 1]e>JaVaSCr1pt 上 の 練習 </ 上 1 上 1e> 
く <8C エ 1p セ > 
VA&Y CO1or = 『 守 
1f (co1or == 『 青 !) { 


congo1e.1og( "進む ") : 
) e1se { 


conso1e.1og( "止ま る ") : 

) ! 
</ 8C エ ュ 1p ヒ > 
</head> 
<DOdY> 

</ body> 

</htm1] > 





ーーー 


和仁 060R 基 和 
上 






AN 本 3 


変数 color に 代入 きれ て いる 値 は 、 


CoO1or == 『 青 " 





e KN” 4 の て マヤ NNWW ポ ん ま ボ we オオ 連 キキ WWW デ WW ャ WNW を WNWWWM ザ ナ ポ MW ま WWW ギ ギャ awWPwwWPNWWY ギ を aw ルオ WW キ WW Wi 古人 W す ず ず 年 m wwwww さ キネ やす テ MMNN あ wwwpYwY ャ WW よ EEWT WIN まさ 放電 ルキ ます WNW よさ VWN ま IIYWW NII た さる) 
YAYYYKAYeYA 4 eVAAY AS は nkkkLrkrthit な tk し rk は PL かせ に YYS(CYTTUYY を TTP 人 は 1 すれ YYrSm は は か 70y ゃ も Tk (で YSYT は を (PS99 て も も ツキ トリル シ や 
か か か の ず で 0 ます ] を a 。 OTTOYT の YTVYPTYW ツ rrWTUNTYTWUUVOYYWTYTKYTYCWDPAXDOAAOAUAUEAAAIOMUKAAMAAULAMLAMLUDLALLUMKILUARALKLAAMANKMEL AMO ルル U0L AD み ルル h ゆ 作り 0 ゆみ りか も いのり ゆい ゆり ひ ゆり も 4 まゆ bh も kd 
いい いん を か か みか 二 寺 「 い 。  / 電 ポ を 居 MM お WWANINTNW も WNWNWEWWNFWWNWMNW ま WW や WNWYAWNTWT WavWWwwhWAWWW 和 の も が 放 ル キト WNWWIWWW ま My WWWWANWTWWMWMMUWRNWON WWWWWNNWWWWMMhWNYMKIYNN ル NMWNNWMNNPT キ WANWNWtNWNWINWWNKWFM ま WW や TNYW や TWA 
" 人 喝 電 プ 講 !0H9IHYOYWyR 10 At KEY Rh.94244044442 人 yt 23704494C40424yhH YYt47 け kit299YL704Y09 人 YR 


の よう に " 青 " な の で 、 以 下 の 条 件 式 の 結果 は true と な り ま す 。 


var Col]or = 『 青 !: 


80 true な の で すぐ 下 の ブ ロッ ク を 実行 
1f eohor ・- " 衣 り 1 * 

congoTe.1og( "進む ") : 
) e1gse { 


congo1e.1og( "止ま る ") : 


次 の よう に 、1 行 目 で 変数 color に 別 の 値 を 代入 する と 、 実 行 結果 も 変わ り ま 
す 。 





yar color = 『 赤 ": 


AME AWT NVA が 99 LCUY Ra ODNMMINIMDA 二 TE MPUWUCS MURUA he - 7 CS CNT JIA 地 MI MA IMW 

OTCRTWTIO あき が すり AE プ や 4 が OUUSSOD リ 放り 0 で 2 た 株 60 Lv て AU に 人 も 『 US か AKA の NAO 凡 ET IMISESIUU 0 唐 YY WMYAGcIUUUMAVOUY カリ < 
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= と ニー は 別物 


ら つ の 値 を 比較 する 場合 は 、 イ コー ル を ら つ (= テ =) つなげ て 記述 し ます 。 イ 
コー ル 1 つ だ け (=) に する と 、 右 辺 の 値 が 左辺 の 変数 に 代 人 人 され て し まう の で 
気 を つけ まし ょ う 。 | | | | 


1f(x == 10) // 変数 x の 中 身 と 10 を 「 比 較 」 
1f(x = 10)  // 10 を 変数 x に 「 代 入 」 


5 ンー 一 
以降 の サン プル コー ド で は 、JavaScript (リス ト 5.1 の 網 掛 け 部 分 ) の み 
ン ン を 掲載 し ます 。 


より 複雑 な 某 件 式 の 書き 方 


リス ト 51 は 、 信 号 が 再 で あれ ば 進み 、 そ う で な けれ ば 止ま る と いう スク リプ 
ト で し た 。 し か し 、 信 号機 の 直進 可能 を 表わす 色 は 「 青 ] と 表現 する 人 も いれ 
ば | 緑 」 と 表現 する 人 も いま す 。 
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If (Color ニ 


ノ 緑 も 「 進 お 」 に 
NUMDE 


2 ) 


NM 









「 青 ]」 と 「 緑 」 の 両方 を 「 進 む ]」 に し た い 


どちら も 「 進 む 」 と いう 同じ 処理 を 行なう に も か か わら ず 、 条 件 が 1 つ で は 
表わし きれ な い 場 合 、 論 理 演算 子 を 使っ て 複数 の 条件 を 記述 で きま す 。 


論理 演算 子 
六 算 子 使用 例 


左辺 と 右辺 の どちら も 

EN-ーーaCR20EOMMNiW 
左辺 と 右辺 の どちら か が | 0 
true の 場合 は true 


1 ee 2 遇 LE て true 


リス ト 5.2 は 、 変 数 color に 代入 きれ て いる 値 が " 再 " も し く は " 緑 " で あれ ば 以 
降 の 処理 を 実行 する 、 と いう 意味 に な る の で 、 青 と 緑 の ど ちら で あっ て も 同じ 
結果 を 得る こと が で きま す 。 
















ょ が を ac Pe 
a が true の 場合 は Ea1se 






リス ト 5.2 複雑 な 柔 件 式 


VaY CO1Or = 『" 青 』 


1f (co1or == " 青 " || co1or == " 緑 ") { 


conso1e.1oq( "進む ") : 
) e1se { 

console.1oq ("止まる") 』 
) 





ーッ | Mgro9y Meofu nta 
JO 骨 を NO 
(た 『 を FM ん 2 条 
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| は 、 左 右 に 記述 し た 条件 式 の どちら か が true で あれ ば 、ii 文 の プ ブロック を 
実行 し ます 。 


Ltrue 障 間 4 カル ! 「 ど ちら か 片方 で も true で あれ ば 
1f (Go1or =- " 青 め | Go1or = "縛り つ {: | すぐ 下 の ブロ ッ ク を 和 
conso1e.1og( "進む ") : ee 
) e1ge { 


congo1e.1og( "止ま る ") : 
} 


K3 ! 演 算 子 
論理 演算 子 の 中 で も ! 演 算 子 は 少し 特殊 で 、 論 理 値 を 反転 きせ る 働き を し ま 
。 





論理 値 を 反転 


TavaScript で は 、null や undefined な ど 値 が な いこ と を 表わす 特殊 な も の は 
false と 等 し い 値 と し て 扱わ れ ま す (デー タ 型 は 異な り ま す )。 こ の 特徴 を 活か 
し 、 変 数 の 中 に 値 が 代入 され て いる か どう か 、 と いう 判断 を 行なう 場合 に 、! 演 
算 子 を 使う 方 法 が よく 用 いら れ ま す 。 


リス ト 5.3 ! 演 算 子 の 利用 


8 8 


1f (la) { 
console.1og("a は 空 で す ")』 








リス ト 5.3 で は 、 空 の 変数 a の 状態 を 反転 きせ て いま す 。 宣言 だ けし て 初期 化 
され て いな い ぃ 変数 に は undefined と いう 特殊 な 値 が 既定 値 (初期 値 ) と し て 
入り ます 。undefined は false と 同じ 扱い な の で 、 こ れ を 反転 きせ る と true と な 
り 、if 文 の ブロ ッ ク 内 が 実行 され ます 。 

false と し て 解釈 され る 値 に は 、 他 に も 数 値 の 0 や 空 文字 (文字 列 の 長き が 0 
文字 ) な ど が あり ます 。 


8 0 71 


ツ シ 《⑯ a の 中 身 は undefined 


1f (lundefined) { 


\ レ |@ undefined は false と 同等 


1f (!fFa1se) { 


|@ false を 反転 


1f (true) { 
リス ト 5.3 の 変数 a の 反転 動作 イメ ー ジ 


多 方 向 分 岐 


ここ まで に 実行 し た スク リプ ト は 、 信 号 の 状態 に 応じ て 「 進 む ] か 「 止 まる 」 
の どちら か を 行なう 、2 方 向 へ 分 岐 す る 処理 で し た 。 こ こ に た と えば 信号 機 の 
色 が 黄色 だ っ た ら 急 いで 進む 、 と いう 処理 を 追加 し て 3 方 向 以 上 へ 分 岐 さ せ た 
い 場 合 は 、 文 に @lSe if プロ ッ ク を 付け ます 。 








@Wx elSe if ブロ ッ ク を 利用 し た 多 方 向 分 岐 


1f (条件 式 1) { 

条件 式 1 の 条件 を 満た す 場合 に 実行 する 処理 
) e1se 1E (条件 式 2) { 

条件 式 2 の 条件 を 満た す 場合 に 実行 する 処理 
) e1se if (条件 式 3 ) 





条件 式 3 の 条件 を 満た す 場 合 に 実行 する 処理 
) e1ge { 
すべ て の 条件 式 の 条件 を 満た さ な い 場合 に 実行 する 処理 
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else if ブロ ッ ク は 、 複 数 記述 で きま す 。 条件 式 1 一 3 の うち 複数 の 条件 に 一 
致す る 場合 は 、 一 番 上 に ある プ ブロック の み 実 行き され ます 。 


リス ト 5.4 if 文 に よる 多 方 向 分 岐 


yar Col]or = " 黒 " ぁ 


1f (col1or == " 青 " | | co1or==" 緑 ") { 
conso1e.1og( "進む ") 

) e1ge 1f (co1or == " 黄 ") { 
congole.1oq( "急い で 進む ") 』 

) e1ge if (co]or == " 赤 ") { 
console.1og( "止ま る ") 


) e1gse { 
congso1e.1oq( "信号 機 の 故障 " ) : 





リス ト 5.4 は 、 信 号機 の 色 が 青 ま た は 緑 の 場合 、 黄 色 の 場合 、 赤 の 場合 、 そ 
の 他 の 色 の 場合 で それ ぞ れ 異な る 処理 を 行なっ て いま す 。 こ の 例 で は 、 変 数 
color の 中 身 は 黒 な の で どの 条件 式 に も 当て は ま ら ず 、 最 後 の else プ ブロッ ク 内 が 
実行 され ます 。 


var Col]or = " 黒 " ぁ 


1 (6G1or =- " 衣 め 11CGo1or==* 本 りう (ーー: 
false| 


( Mo ウキ 


あま 条件 式 2 も false 


eo1or == "あめ ( 20 
congo1e.1od( "止ま る ") : 
) e1ge { 
conso1e.1oq( "信号 機 の 故障 ") ーー ーー 





条件 式 3 も false 
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y「 分 岐 」 と は 、 処 理 が 多 方 向 に 分 か れる こと 。 
if 文 で スク リプ ト の 分 岐 構造 を 作る こと が で きる 。 
p 条 件 式 は 比較 演算 子 を 使っ て 記述 され 、 結 果 が 論理 値 と な る 。 


_E etcdieey ccir 二 | 


Q 1 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


V&Z XX = ABCT"』 

すそ (kim PABCP) { 
console.1od( "OK") : 

) e1gse { 


congole.1oq ("NG") : 
) 





Q⑩2 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


ザ 化 だ 2 光 ゆ 、 選 人 Ji は 

Yar 20 

まま AMW まり / 導 人 区 (yVN 【 
console.1oq( "OK") : 

) e1ge { 
console.1oqd( "NG" ) : 

) 





ご 解答 は 巻末 に 掲載 
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Switch 文 


JavaScript で 分 岐 構造 を 実現 する 、 も う 1 つ の 構文 を 見 て いき まし ょ う 。 
switch 文 は 、 文 と 同様 に 分 岐 処理 を 行ない ます 。 文 を より 簡略 化し て すっ 
きり と 記述 する た め の 構 文 で す 。 あ る 変数 の 中 身 が どの 値 に 一 致す る か 、 と い 
う 判 断 を 行ない ます 。 





ーー 





Switch 文 は 変数 の 値 で 分 岐 する 


xcWIitOh 文 


8witoh (変数 ) { 
Cage 値 1: 
変数 の 中 身 が 値 1 に 一 致し た 場合 の 処理 
Ca8e 値 2: 


変数 の 中 身 が 値 2 に 一 致し た 場合 の 処理 
Cage 値 3: 

変数 の 中 身 が 値 3 に 一 致し た 場合 の 処理 
deFfau ユ 1 

どの 値 に も 一 致し な か っ た 場合 の 処理 





switch 文 は 、 い ずれ か の 値 に 一 致す る と 、 以 降 の 処理 が すべ て 実行 きれ る と 
いう 特徴 が あり ます 。 リ スト 55 は 、 変 数 sa に 2 が 代入 され て いる の で 、[「case 
2:| 以降 の 処理 が すべ て 実行 きれ ます 。 


リス ト 5.5 switch 文 の 特徴 









ザ & ま どど 8 = 2 ょ 
gwitoch(a) ({ 

Ca8e 1]: 
congole.1oq("!a は 1 で す 『)』 


console.1oqg("a は 2 で す 『") 








Ca8@ 3: 
conso1e.1og("a は 3 で す 『") : 以降 すべ て 実行 
defau1: 


congo1e.1oq( "一 致 な し ") 』 


< 世 --- ーー 





0 1 DA | 1 CE じ 9 を Y C iD Ya 1 2 
et _ Wi VM MI 
1 - 1 1 リ り 【 1] リプ _- j し 【 
* - リッ ル 1 _- 





【 break 文 

リス ト 55 の 実行 結果 に 「a は 2 で す 」 の み が 表 示さ れる よう に する 場合 は 、 
ダル ゴ 
break 文 を 利用 し ます 。break 文 は 、 ブ ロッ ク か ら 強 制 的 に 抜け る と き に 使う 


構文 で す 。 





リス ト 5.6 break 文 の 利用 


8aY a = 2 


gwitoh(a) { 
Ca8@e ]: 
consol1e.1oqg("!a は 1 で す ") : 
breaK: 


Con8o1e 


conso1e.1oqd("!a は 3 で す 『")』 
breaKk: 

defau1 : 
conso1e.1og( "一 致 な し ") 』 








また 、break 文 を 利用 する と 、 前 節 の リス ト 54 の コー ド を 、ij 文 か ら switch 
文 に 書き 換え る こと が で きま す 。 


リス ト 5.7 switch 文 に よる 多 方 向 分 岐 


yar col]or = " 黒 " 


8witoh (co]or) { 

ca8e " 青 ": 

ca8e 『 緑 !: 
conso1e.1oq( "進む ") : 
br@aK: 

ca8e 『" 黄 !: 
conso1e.1oq( "急い で 進む ") : 
break: 


ca8e 『" 赤 ": 
conso1e.1og( "止ま る ") : 
Dr@GaK: 

defFau1 : 
conso1e.1oq( "信号 機 の 故障 " ) : 





switch 文 は あく まで ij 文 を シン プル に 表現 する た め の 構 文 な の で 、switch 
文 で 表現 で きる こと は ii 文 で も 表現 で きま す 。 逆 に 、if 文 で 表現 で きる こと が 
switch 文 で も 表現 で きる と は 限り ませ ん 。switch 文 で は 、 値 の 大 小 や デー タ 型 
の 比較 が で き な い か ら で す 。 よ っ て 、 分 岐 処理 は ほとん どの 場合 に if 文 で 記述 
し ます が 、 単 純 な 条件 式 に よる 分 岐 の 場合 は switch 文 で 簡潔 に 記述 し て も 良い 
たまら 。 
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(とい 」 WW 
し iv k は YAYIN いる) 
か 


24 村 は 持 


分 岐 処理 を 行なう 方 法 に は 、if 文 と switch 文 が ある 。 
p Switch 文 は 単純 な 分 岐 を 簡潔 に 記述 し た いと き に 使 お う 。 


eetide に) 中 つ 
Q 1 以下 の swtich 文 を 実行 し た 結果 、 表 示さ れる 値 は な ん で すか ? 


s( し っ 人 My 放電 9 
gwitoh(x) { 
Ca8@e "AA!: 
con8ole.1od("A"): 
Ca8@e "B": 
console.1od("B"): 
< 【 ( 2 
console.1od("C"): 
ー! 「 ! 間 生 9Wiuy 
console.1od("D"): 
defFau1 : 
console.1oqd("E")』 


⑳ る ⑳ 以下 の swtich 文 を 実行 し た 結果 、 表 示さ れる 値 は な ん で すか ? 


。/ (0 0 My サン o 
gwitoch(x) { 
Ca8@e "A": 
consgole.1oqd("A7)』 
Ca8@e "B": 
console.1od("B") : 
・ イ ! | 半 和 MMo- 
con8ole.1oq("C") 
Ca8e "D『: 
console.1od("D"): 
defau1 : 
congole.1od("E"): 
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/ 委 
も 少 


② 反復 処理 と は 


ある 処理 を 5 回 実行 し た い 、 と いっ た 場合 に コピ ー& ペ ー ス ト し て 5 行 分 同 
じ 記 述 を する の は ナン セン ス で す 。 後 か ら 修正 を する こと に な っ た 場合 、5 行 
すべ て を 直さ き な く て は な り ま せん 。 そ こ で 、 反 復 あ る い は 繰り 返し と 呼ば れる 
構造 を 利用 し ます 。 JavaScript で 反復 処理 を 行なう 方 法 に は 、while 文 と for 
文 の 2 つが あり ます 。 





学生 while 文 








We 


_ 5 回 繰り 返し て ! 






反復 処理 の イメ ー ジ 
人 rrwtrzoacmccefepwrc と レー フ を oWOg 


まず は 、while 文 の 使い 方 を お ぼ え まし ょ う 。 


while 文 
whi1e (継続 条件 式 ) { 


) 


繰り 返す 処理 
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IE 


継続 条件 式 に は 、j 文 と 同様 に 結果 が 論理 値 と な る 式 を 記述 し ます 。 継続 条 
件 式 の 結果 が true の 間 ブ ロッ ク 内 の 処理 を 繰り 返し 、false に な る と 繰り 返し を 
終了 し ます 。 継続 条件 式 は 1 回 分 の 繰り 返し 処理 の 最初 の タイ ミン グ で 検証 さ 
れ ま す 。 


whi1e (Erue) { / 
繰り 返す 処理 | 





} 





wht1e (false) { 。 


MI 000008 半 抜け る | 





で は 、 基 本 的 な while 文 の 例 を 見 て み ま し ょ う 。 


リス ト 5.8 while 文 の 利用 


Var a 
while (a <= 100) { 
A = 2 


Con8ole.1od(a) 


conso1e.1oqg( "終了 ") 』 





リス ト 58 は 、 変 数 a の 値 を どん どん 倍 に し て いき 、100 を 超え た ら 繰 り 返 し 
を 終了 する 、 と いう スク リプ ト で す 。a の 値 が 100 を 超え る と 、 次 の 繰り 返し 処 


1 





理 へ 進ん だ タイ ミン グ で 継続 条件 式 の 結果 が false と 判定 され 、 繰 り 返 し を 抜け 
ます 。 


a を 2 倍 す る 





リス ト 5.8 の 実行 イメ ー ジ 


斑 @ 敵 0 00)U- WO 


p 反復 (繰り 返し ) と は 同じ 処理 を 何 度 も 繰り 返す スク リプ ト 構 造 
の こと で 、 ル ー プ と も 呼ぶ 。 


了 反復 処理 を 行なう 方 法 に は while 文 と for 文 が ある 。 


還 Oheck est ③ 
Q⑳ 1 以下 の while 文 を 実行 する と 、 繰 り 返 し は 何 回 行なわ れ ます か ? 


ザ あ と ど 8 = 0】7 

while(a < 3) { 
a+ 二 5 

) 


る 以下 の while 文 を 実行 する と 、 繰 り 返し は 何 回 行なわ れ ま すか ? 


ザ 8 ど 4 は = 38 

while(a < 3) { 
a+ 二 』 

) 





解答 は 巻末 に 掲載 
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② for 文 と は 


while 文 は 、 繰 り 返 し の 継続 条件 の み を 指定 する 単純 な 構文 で し た 。 そ れ に 
対し て for 文 は 少し 複雑 で 、 繰 り 返 す た び に 変数 の 値 を 増減 きせ る こと が で き 
ます 。 こ の 変数 を カウ ンタ 変数 と 呼び ます 。 何 回 目 の 繰 り 返 し 処理 を 実行 し て 
いる の か と いう 情報 が 必要 な と き な ど に は for 文 を 利用 する と 良い で し ょ う 。 





TYP 人 









繰り 返し た 回 数 を カウ ント ) 
上 かい 明 テ ot 
(5 回 線 り 返し て えー と 、 あ と 2 回 
、 繰 り 返さ な きゃ ・・・. 
NN 2 


陣 





for 文 の イメ ー ジ 


for 文 は 次 の よう に 記述 し ます 。 


for (初期 化 式 : 継続 条件 式 , 増減 式 ) { 
繰り 返す 処理 
) 








式 の 種類 説明 実行 タイ ミン グ 
初期 化 式 カウ ンタ 変数 を 初期 化す る 代入 式 最初 の 1 回 だ け 実行 され る 






| 1 回 分 の 繰り 返し 処理 の 最初 に 毎回 








株 り 反 し を 松村 する 条件 rr 導 


1 回 分 の 繰り 返し 処理 の 最後 に 毎回 
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それ で は 、 基 本 的 な for 文 の 例 を 見 て み ま し ょ う 。 


リス ト 5.9 for 文 の 利用 


for (var 1 = 1 : 1 <= 5 』 i++) 人 
console.1og(1 + "回 目 ")』 








リス ト 59 は 次 の 順序 で 実行 され ます 。 





変数 i に 1 が 代入 され る (初期 化 式 ) 

の | が 5 以下 か どう か 検証 され る (継続 条件 式 ) 

| の 値 が コン ソー ル に 表示 され る 

の 〇 に 1 加算 され る (増減 式 ) 

継続 条件 式 の 結果 が false に な る まで @~ー⑨ を 繰り 返す 


実行 イメ ー ジ は 次 の と お り で す 。 
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| に 1 加算 | 








リス ト 5.9 の 実行 イメ ー ジ 


カウ ンタ 変数 の 名 前 は 通常 の 変数 と 同様 に 自由 で す が 、 慣 例 と し て ji と いう 
名 前 が よく 使わ れ ま す 。 


for 文 の 応用 例 


for 文 は さき さまざま な 応用 が 可能 で 、3 つ の 式 の 指定 を 工夫 すれ ば 、 カ ウン ト 
アッ プ で は な く カ ウン ト ダ ウン する こと な ども 可能 で す 。 








國 カ ウン ト ダ ウン 


メー) 家 紹 い / ・ 2 0 9 当 和 98 * er000W Mk も ひ 9 人 60 


また 、for 文 は 配列 を 扱う 際 に も 重宝 し ます 。 配列 の イン デック ス を カウ ンタ 
変数 で 指定 する こと で 、 配 列 の 要素 に 対し て 1 つ ず つ 順 に 処理 を 実行 で きま す 。 


リス ト 5.10 配列 と for 文 


Ya number | d9。. 六 き 。 きき す 』 
for (var 1 0 , 1 < number.1ength : 1++) { 


console.1ogd (number [1] ) 


) 
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リス ト 5.10 の 実行 イメ ー ジ 


リス ト 5.10 の number.length は 、 配 列 number の 要素 数 を 表わし ます 。 よ っ 
て 、for 文 の 継続 条件 は |「i の 値 が 0 か ら 3 未 満 ま で ] に な り ま す 。 配列 number 
の イン デック ス は 先頭 か ら 順 に 0、1、2 で すか ら 、 ち ょ うど カウ ンタ 変数 の 値 
が イン デック ス と 対応 する わけ で す 。 


9 


任意 の 文字 列 を キー と する 連 入 配列 は 、 通 常 の for 文 で は 扱う こと が で きま 
せん 。 連想 配 列 の 要素 を 1 つ ず つ 処 理 する 場合 、for 文 で は な く for-in 文 を 利 
用 し ます 。 


for-in 文 








for-in 文 の 実行 順序 





for-in 文 は 次 の よう に 記述 し ます 。 


for-In 文 


Eor (Var 変数 名 PP 連想 配列 名 ) 生 と 
連想 配列 名 [変数 名 ] と する こ と で 名 要素 を 参照 で きる 


ル 
し 





for-in 文 は 、 連 想 配列 の 要素 数 分 繰り 返し を 実行 し ます 。 繰 り 返 す た び に 変 
数 の 中 に 連想 配列 の キー の うち いずれ か 1 つが 代入 され ます 。 


リス ト 5.11 連想 配列 と for-in 文 


var favoriteg = { 
oO : “カレ ー ラ イズ ス ド 。 
COlor : 『 青 !。/ 
numDer : 7 
}: 
for (var key in favorites) { 
console.1od(Kkey + ! : !) + faVvor1teg [Key] ) : 
) 





MV ず f + 





実行 イメ ー ジ を 見 て み ま し ょ う 。 
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すす や コア SV ミ と LE WWW エ で ホー アー デー ャ ネリ ょ ママ wwWvwiww キ se を マ で WW W 雪 w WNW IF 生生 3W ネギ:WNM キ る W 症 ま 和 ww WwW ポ また W ず 4 導 性 WNWWKW や ませ RWWANIE さ パネ ド や wWW ォ キネ ゃ や まま NN まま 王 ま 光 RESNRRARSSA Ua WWMWwAmYWY エ ネ や ポポ ポポ RW we NNwceW で WW WWNE ュ ま W を を ポル 東 き ネネ ポ WO ませ WWW e 

を TWD NM こ すま WWAA み 2 ォ WWKALMSw ま が W ま そま まき ル AawWANKWT キ ルネ キキ WWWSmW す 人 WW で も の WMww や NNA き デザ ャ qaNWWYwka を すず WW まさ すず ル 人 まま WNWwWN や か が ず ず ボキ もせ さす mWNIAWY 放 まい ま を WW で 間 W で ' す ヤ ャ ルル リド ず 『 還 や も で WWn ポ ヤキ キオ MVY ポ WTmwwnwmttf ポ ササ で 4 さよ で 
vu ゆす サダ 和香 0 「 二 生 URL SSRSASSAUIALA2IMSSIMRSMLESSSIMN2LMIuuSuNMMLN WW ボド イヤ ペル ネル ず YY ャ WWWN ATY ず WV ネ 二 本 W キ WWNWN も キサ 才 ポ ず ず キキ 生 NAT W EN まま WW まや WNWNNWNUNRY キ WNW や WW や ず キ キネ Wh ャ キャ WWWI キ WTFTNNWW や WANTY や 人 省 較 導 生 覆 WIWWWY* WW ャ r 
あか や か の ルツ 幸人 すめ イヤ ・ " - 評 ー PR かび サザ す いい ' ぜ * すす TIRERNDULXRASARARIRALA2SANSM WNWNEYWWWYT ww WaWWmtt も ホ MYWwAAYWYM Wwa ナ WWYJwWdW* YNK ゃ ササ リポ WAVWNWNNMNWWYMWA ま サ WNWNN や NVYNANYA ま サリ WWNWWWNWNNMUWVWNMNNNWNMRMTNWWWN INREAM UL 
II  - ルン も SE  . 呈 | 「 TS し 朱 as WWW ポポ ル ホ WW リッ w ル ォ ネ Mw も や ドル AMWWMWM ま ます w ツ ペ ポ MUIN ま タネ ポキ まあ ポル WWWWWWWMWNW 上 NMWNWMANMNNYWNWNWWNWWNWMWNWWWWN ボ WNWNNNMPWWWOWNWWWN よ INWWWNAW チ WNWNWNWNNWMW パ ザ WFWNMMNMWUNNNNWWNNNNWVWWYWNNYWWNWUWNWWP0NWmWwYVnNNNWYT 


yar favoritegs = { 


"カレ ー ラ イス ", 


0 


の ・ UL Au 
、 CRumbe め や : 7 | 名 キー が 1 回 す つ 取 り 出さ れ 、 
か の key に 代入 され る 

7 


for (var(key)1n Favorites) { 


cong8ole.1od(Kkey + ! : ! + Eavoriteg [Key] ) : 





リス ト 5.11 は 、 連 想 配 別 の すべ て の 有 要素 を 一 覧 表示 する スク リプ ト で す 。 連 
想 配列 favorites の 要素 数 が 3 つ な の で 、for-in 文 の 繰り 返し 回 数 は 3 回 で す 。 
1 回目 の 繰り 返し 処理 で は 、 変 数 key の 中 に 「food」 が 代 人 人 され ます 。 2 回 目 は 
「color」、3 回 目 は 「number」 と いう よう に 、1 回 分 の 繰り 返し ご と に キー が 
1 つ ず つ 取 得 さ れ ま す 。 

な お 、 キ ー が 取得 され る 順番 は 保障 され て いな いた め 、 配 列 の 先頭 要素 か ら 
順序 通り に 処理 を し た い 場 合 に は for-in 文 は 適し ませ ん 。 


while 文 に 「 カ ウン ト 機 能 ]」 を 付け 加え た も の が for 文 で ある 。 


p 配列 の 要素 を 1 つ ず つ 処 理 する 場合 は for 文 を 使う 。 
連想 配列 の 要素 を 1 つ ず つ 処 理 する 場合 は for-in 文 を 使う 。 
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Gheck 宝 est 全 


Q 1 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


イ ) - 人 。【 00 人 0 六 衝 200 96 he 0 | 
congole.1od(1) 
} 


Q 以下 の forin 文 を 実行 する と 、 繰 り 返 し は 何 回 行なわ れ ま すか ? 


し 9 ト 層 0 0 計 枯 語り NM・20 2 和 00) の 人 Mc いい 0M・ 和 6 徹 介 し いす 
For (var key in number) { 

congo1e.1oq (number [key] ) 
) 





ご 解答 は 巻末 に 掲載 
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子 人 細 





り 返し の 制御 


繰り 返し の 途中 で 処理 を 中 断 し た り 強 制 終 了 し た りす る た め の break 文 と 
continue 文 を 学び ます 。 


22 繰り 返し の 中 の break 文 


switch 文 の 節 で 学習 し た break 文 は 、 ブ ロッ ク の 外 へ 抜け る た め の 構 文 で し 
た 。 こ の break 文 を while 文 や for 文 の ブロ ッ ク 内 に 記述 する こと で 、 継続 条件 
式 が true で あっ て も 強制 的 に ブロ ッ ク の 外 へ 抜け る こと が で きま す 。 繰り 返し 
の 途中 で 、 例 外 的 に 繰り 返し を 終了 させ た い 場 合 な ど に 使い ます 。 













ーー 





の ぐい へ ンー へ 
S 回 繰り 返し て ! へ ご めん 、 途 中 まで で 
(amoguc) で euc 


TV 
TO 
『 , 仙 NN 
WM W い 
ます \ 
2 





WAN AO TDD チ 
ーーーー ツ "ーーー ツ ーーーーー ング 


ーーー ズ 
(途中 で 処 理 を 抜け る ) 
wa 


ーー の の トード ーーー 





break 文 の イメ ー ジ 
for 文 で の 利用 例 を 見 て み ま し ょ う 。 


リス ト 5.12 for 文 と break 文 


Var icketg = [ 290, 296, 299, 301, 305 ]』 
For (var + = 0z 1 < ticokets.1engthz 1++) { 
1f (ticketg[i] >= 300) { 


congole.1og(ticketgs [1] ) 繰り 返し を 抜け る 


) 


conso1e.1oqg( "終了 ") : 








リス ト 5.12 の for 文 は 、0 か ら 5 未 満 の 間 、 計 5 回 繰り 返す 条件 に な っ て いま 
す が 、 配 列 要素 の 値 が 300 以上 に な っ た 時 点 (4 回 目 ) で break 文 に よっ て 繰り 
返し を 抜け て いま す 。 





リス ト 5.18 ら の 実行 イメ ー ジ 


CoOntinue 文 


ウ 








continue 文 は 、1 回 分 の 繰り 返し 処理 を 中 断 し 、 次 の 繰り 返し 処理 へ 進む 
構文 で す 。break 文 と は 違っ て 継続 条件 式 が false に な る まで 繰り 返し を 続け ま 
す 。 最 後 ま で 繰り 返す けれ ど 、 あ る 条件 の と き に だ け 処 理 を 行ない た く な い 場 
合 な ど に 利用 し ます 。 
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ご めん 、 3 回 目 だ け 


MdN 処理 し な か っ た よ ・・・ 





3 回目 の 処理 の 場合 、 
処理 を 無視 し て 
4 回 目 へ ジャ ンプ 






[1 三 【 の た が 


D 川 T 田 ア チ ヽ | 
%/ ! 1 で | fr ト 【 | 





Continue 文 の イメ ー ジ 


で は for 文 で の 例 を 見 て み ま し ょ う 。 





リス ト 5.13 for 文 と continue 文 
var ickets = [ "指定 席 ", "自由 席 ", "指定 席 ", "自由 席 ", 『 指 定席 " ]: 


for (var 1 = 0z 1 < icokets.1engthz 1++) { 
if (tickets[1] == "自由 席 ") { 


4 
Con 上 inue ト 次 の 繰り 返し 処理 へ 
) 


console.1od(1 + ! | リエ 上 ioketg [1] ) 


J 


conso1e.1oqg( "終了 ") : 





リス ト 5.13 は 、 配 列 要素 の 値 が "自由 席 '" だ っ た 場合 に の み continue 文 を 実 
行 す る よう に な っ て いま す 。 continue 文 が 実行 きれ る と 、 以 降 の 処理 は 無視 し 
て た だ ち に 次 の 繰り 返し 処理 へ 進む た め 、 コ ン ソ ー ル へ の 出力 は 行なわ れ ま せ 
ん 。 
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i が tickets false 







次 の 繰り 返し へ … 


進む 
tickets の | 番目 を 表示 





リス ト 5.13 の 実行 イメ ー ジ 


y 繰り 返し の 信 中 で 処理 を 抜け る に は break 文 を 使う 。 
p ] 回 分 の 繰り 返し 処理 を スキ ッ プ する に は continue 文 を 使う 。 


この 草 の 到 達 度 チェ ッ ク 


Q 1 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


g 10. 
1f (XX === "10『) { 
console.1oq( "OK") : 
) e1gse { 
conso1e.1od( "NG") 』 
) 





⑳@⑳ switch 文 に お いて 、『 文 の else と 同じ 役割 た 果たす キー ワー ド は な ん で 
すか ? 
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Q 配列 fruits の 要素 を 一 覧 表示 する スク リプ ト に な る よう に 、 空 欄 A と B 
を 埋め て くだ さい 


まだ で エロ 1 も きい w 【 ゆり ん 9 / あか ん りこ ルイ の が ルル 加 


W ぶどう り / W バ パナ ナリ 朋 
for (var 1 = eg.| B | 0 人 的 NL 生 


congole.1oqd(Fruits [ ュ 1] ) 
) 


Q 4 連 電 配列 user の 要素 の 値 を 一 覧 表示 する スク リプ ト に な る よう に 、 空 欄 
A と B を 埋め て くだ さい 。 


va uSer = { name : "山田 太郎 "。 age : 25, height : 170 }: 


for(var x | A | user) { 
conso1e.1og(user| B |): 
) 


QB 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


for (var 1 = 1 1 <= 10z i++) { 


まま (ボボ 0M5)7 4 
br@eaKk: 

】 人 間 台 人 オ ま (4 も (も う は we 店 0 も 
COn 七 1nuG: 


| 


conso1e.1oq(1) : 


Q@6 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


Or (ya デ エエ = ォ 17 3 cm 107 は ++) 人 【 
4 9 生計 20 レ 0 、 00 01 
br て @aK: 
} 


congo1e.1oqd(1) : 


⑳7 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


for (var 1 = 1 1 <= 107: i++) 人 { 
(3 も 2 aw)07)【 
COn 上 1 ユ nuG@ ) 
} 


congole.1oq(1) : 





ご 解答 は 巻末 に 掲載 











、 ご の 章 で 学ぶ こと 
自作 関数 

組み 込み 関数 
変数 の スコ ー プ 
匿名 関数 

即時 関数 











@ 関数 は 材料 を 渡す と 処理 を し て くれ る 便利 な ヤツ 倫 


関数 は 、 よ く 使 う 、 あ る い は 関数 の 名 前 を 呼ぶ だ け で 
記述 に 手間 の か か る 一 連 の 処理 を 利用 する こと が で きま す 
ひと まとめ に し た も の で す 


口 ポ 、 
夜 ご は ん を 作っ て 





関数 に は 「 引 数 」 と いう 作業 に 関数 が 作業 を 終え る と 、 
必要 な 材料 を 渡し ます 「 戻 り 値 」 と いう 結果 を 返し て くれ ます 





JavaScript の スク リプ ト は 、 複 数 の 関数 の 組み 合わ せ に よっ て 構成 され ま 
す 。 よ ぐ く 使 う 機能 な の で 、 本 章 で 仕組 み と 記述 方 法 を し っ か り と 理解 し て お 
きま し ょ よう 。 
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⑨ mw 


ー 連 の 処理 を ひと まとめ に し て 、 名 前 を 付け た も の を 関数 と 呼び ます 。 手 間 
の か か る 処理 を 関数 と し て 定義 (作成 ) し て お け ば 、 必 要 な と き に 何 度 で も 呼 
び 出 すこ と が で きま す 。 同 じ 処 理 を 何 度 も 実生 し た り 、 一 部 条件 を 変え て 実行 
し た いと き な ど に 有効 で す 。 ま た 、 ス クリ プ ト が 長く な る と 可読性 が 低く な る 
た め 、 機 能 や 役割 ご と に 分 け て 関数 化し 、 何 の 処理 が どこ に 記述 され て いる の 
か を わか りや すく する 目的 も あり ます 。 

関数 は 、 処 理 の 材料 と な る 引数 を 受け 取り ます 。 そ し て 、 処 理 が 終了 する と 
戻り 値 と 呼ば れる 処理 結果 を 返し ます 。 











関数 
HL: 全 較 |】 7 (一 連 の 処理 ) 還 隊 | 記 り 値 
スク リプ ト へ ヘ へ 
結果 を 戻す 


関数 で は 、 受け取 っ た 引数 を 使っ て 議 細 織 
処理 を 行なう 「 






関数 へ 渡す 





関数 の 
処理 結果 


りり 有 に 
必要 な 情報 





関数 の 機能 
関数 に は 、 大 きく 分 け て 次 の 2 種類 が あり ます 。 


@ 自作 関数 ……… 目 分 で 定義 (作成 ) し て 使う も の 


@ 組 み 込 み 関 数 … プ ログ ラミ ング 言語 に すでに 組み 込ん で ある も の 
(JavaScript が あら か じ め 備 えて いる 関数 ) 
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EE まさ せれ た ある きえ 。 
まあ AE キャ テー 
ペ VW ポ NM ル オツ キー ANN \W 
WNW か が りや の WW が キザ YY 
WWWWANWWWWM UE まり 





最初 に この 節 で は 、 関 数 の 知識 の 基本 と な る 自作 関数 の 作り 方 、 す な わ ち 関 
数 の 定義 方 法 に つい て 学び ます 。 


2)) 引数 も 戻り 値 も な い 関 数 の 書き 方 


関数 の 引数 と 戻り 値 は いずれ も 省略 する こと が で きま す 。 ま ず 、 最 も 単純 
な 、 引 数 も 戻り 値 も な い 関 数 の 定義 方 法 か ら 見 て いき まし ょ う 。 








se き 関 数 の 定義 引数 ・ 戻 り 値 な し 
function 関数 名 () { 


処理 





se る 定義 し た 関数 の 呼び 出し 引数 ・ 戻 り 値 な し 
関数 名 () 


関数 は 、function 文 を 使っ て 定義 し ます 。 定 義 し た 関数 を 実行 する と き は 、 
関数 名 を 記述 する だ け で す 。 定 義 の 際 も 呼び 出し の 際 も 、 必 ず 関 数 名 の 後ろ に 
丸 か っ こ 0 を 付け ます 。 関数 名 の 命名 規則 は 、 変 数 名 と 同様 で す 。 

利用 例 を 見 て み ま し ょ う 。 


リス ト 6.1 引数 も 戻り 値 も な い 関 数 の 利用 


< !DOCTYPE html] > 
<htm] 1anqg="]a"> 
<head> 
<meta Char8et="utfF-8 リ "> 
< 上 1 上 1G>JaVa8SCr1p 上 の 練習 </ 上 1t 上 1e> 
く <8C エ 1D ヒ > 
// 関数 の 定義 
function sayHe]11o() { 
congole.1oqg( "こんにちは ") 


) 
sayHe11o() 』 // 関数 の 呼び 出し 
< く / 8C エ ュ エ p 上 > 
</head> 
<DOdy> 
</ body> 
</htm1 > 
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リス ト 6.1 で は 、sayHello と いう 名 前 の 関数 を 定義 し て いま す 。 関 数 は 、 定 義 
し た だ け で は まだ 実行 され ませ ん 。 関数 を 呼び 出し た タイ ミン グ で 初め て 実行 
され ます 。 









/ / 関数 の 定義 
function sayHe11o( ) { 
congo1e.1og ("こんにちは 『) 









/ / 関数 の 定義 
function sayHe11o() { 
console.1og(" こん に ち は 『) : 

















sayHe11o(): // 関 数 の 呼び 出し 






ーー ーー ーーーーーー ツ ーー 
= 常 、 関 数 は 定義 し た だ け で は 実行 され な い 。| 

ーー と 実行 する に は 呼び 出し が 必要 、 関数 の 中 の 処理 が 

売 了 する MbwsddkztascdsserissizAwsceiC98e96 天 生 され る 


関数 の 実行 イメ ー ジ 


な お 、 関 数 の 定義 は 記述 順序 に 関係 な く 優先 的 に 行なわ れる の で 、 次 の よう 
に 関数 の 呼び 出し が 先 に 記述 され て いて も 問題 な く 動作 し ます 。 


sayHe11o():  // 関数 の 呼び 出し 

// 関数 の 定義 

Funotion sayHe11o() { 
console.1og ("こん に ち は 『") 』 





以降 6 サン プル コー ド で は 、 JavaScript (リス ト 6.1 の 網 け 部 分 
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人 AOyw り WU ck すい 芝生 導 送り us ea RT YO RT の 
仙人 が か か td も か か ツ や 人 か なせ か re サム の ry か id な キサ か も ytO め の いか な か か りき の かり W の か か 伸和 す Wy が か を WAV テリ WW 人 か ル 4 の の かゆ を や かり ゆる WMy のび 作 
My まま INIT NW パ ォ チ WWWNWNNWWWWNMNW ギ WM まず W す や ポル ドド リポ 人 W ま WWWW や サパ WMWNGMPWNW あ MWTNWWNMWwMMNNNNOFWNNWNWWWYNNTNNMN ペ WW や WM ポ WM ネ 4 ネギ NMWWYNW WWN ま まま も キ 必 ポ ボボ KaWWMMWAWWWWNNWNYWAMNPDPWNNALNM ず ゃ JWA WNW 衝 ポ W や HE NE すま UL た 
AA で か か w 電 ます WW 小 ド ポポ WNW で ANN や やや で やゆ MIN キ が II TIWTITTURNESBARIRAKIEALIRIARSIEIARARJSRSILEAJ ELLLU ま は まま EE LESJILLS た も LLS も 8。 RESELLN RU ILELIN WW まず WNWNWWNW ル や WMWNMNNSNTWwM 衝 ル WWTWNMWMMUWIWWWMN や WWnNNA 
Mt 


⑳)) 引数 の ある 関数 の 書き 方 


引数 と は 、 関 数 に 渡す 材料 の こと で す 。 た と えば 、 あ る 値 を 2 倍 に する 処理 
を 行なう 関数 が あっ た 場合 、「 あ る 値 ]」 と は いくつ な の か を 指定 し な けれ ば な り 
ませ ん 。 こ の 情報 が 引数 で す 。 引 数 は 、 複 数 指定 する こと が で きま す 。 








関数 の 定義 引数 ぁ り 


function 関数 名 (引数 を 入れ る 変数 名 ) { 
処理 





定義 し た 関数 の 呼び 出し 引数 あり 





関数 は 引数 を 受け 取る と 変数 に 代 人 し ます 。 そ の 変数 を 宣言 し て いる の が 
function 文 の () 内 で す 。 こ の 場合 、var は 必要 あり ませ ん 。 

また 、 引 数 は 複数 指定 する こと が 可能 で す 。 次 の よう に カン マ 区 切り で 記述 
し ます 


関数 の 定義 引数 の 複数 指定 


funotion 関数 名 (引数 1, 引数 2 … ) { 
処理 





定義 し た 関数 の 呼び 出し 引数 の 複数 指定 
関数 名 (引数 1, 引数 2 … ), 


で は 、 引 数 の ある 関数 の 例 を 見 て み ま し ょ う 。 


リス ト 6.2 引数 の ある 関数 の 利用 


Function sayHe11o(name) { 
congole.1oqd (name + "さん 、 こ ん に ち は "): 


) 


sayHel1o(" よ し お り "): 
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W WU MWT UMWUE IN 1 【 KWPAWOUOYSDONOTID4 バル ATUDWDU / / 07 AM 2 が リリ VMMU7N 
J メメ MT か M ueIOOUATI が リル U k 0 Li! こ AL 7 1 WW UN6 ! 用 れず va ITUM DVMWUVWMu 族 上 7 り 「 ャ 
OU 0 WANSOU 4 COUT VA 0 NUMANTK0 1 N M NN 中 Wu 
リリ : MM W 1 AUO " り 了 y 人 M 上 入 机 イイ い 
よし お さん 、 こ ん 0882 も GO 
9 に 1 2 り NL ぃ 和 、y IM た 所 いっ 」 
K 『 0 に * WCu! 
WAY h」 eg の がり J 7 必 * IM Ka KiR ば 
2 ARE 8 0 67600 が 
り ' | 1」 も Wi 


UI 7 Ca 剛 ぶ 7 『 







リス ト 6.2 を 実行 する と 、" よ し お "と いう 文字 列 が 引数 と し て 関数 に 渡さ れ 、 
name に 代入 され ます 。 sayHello 関数 内 で は 、name は 通常 の 変数 と 同様 に 扱う 
こと が で きま す 。 

function sayHe11o(name) { 


congole.1oqd(name + "さん 、 こ ん に ち は 『") : 


渡さ れる 


sayHe11o (よし お ゆか ーー 


%⑳ り ) 戻り 値 の ある 関数 の 書き 方 


戻り 値 は 、 関 数 の 処理 結果 で す 。 た と えば 、1 ~ 10 まで の 数 値 の 合計 値 を 求 
め る 関数 が あっ た 場合 、 算 出し た 合計 値 を 関数 の 呼び 出し 元 に 返却 し な けれ ば 
な り ま せん 。 こ の 返却 され た 値 を 戻り 値 と 呼び ます (返り 値 、 返 却 値 と 呼ぶ 場 
合 も あり ます )。 戻り 値 は 引数 と 違っ て 1 つ だ けし か 指定 で きま せん 。 








ss、 関 数 の 定義 戻り 値 あり 


function 関数 名 () { 
処理 
return 戻り 値 : 








Ws 定義 し た 関数 の 呼び 出し 戻り 値 あり 
戻り 値 を 入れ る 変数 名 = 関数 名 () 
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return 文 が 実行 され る と 、 関 数 の 呼び 出し 元 に 戻り ます 。 そ の 際 、 戻 り 値 
と し て 指定 し た 値 が 返却 され る の で 、 戻 り 値 を 代入 する 変数 を 用 意 し て お きま 
まま 必 。 。 


リス ト 6.3 戻り 値 の ある 関数 の 利用 


funotion ca1c() { 
Ya num = 0』 
Eor (Var 1=1: 1<=10: 1++) { 
num += 1, 


YeGturn nmUmz 


) 


Ya と regSu]t = oca1]cC()z 
conso1e.1od (resu]) : 





リス ト 6.3 の calc 関数 は 、1 か ら 10 ま で の 値 を 合算 し た 結果 を 戻り 値 と し て 返 
し ます 。 return 文 が 実行 きれ る と 、 変 数 num の 中 身 の 55 が 呼び 出し 元 に 返却 
され ます 。 次 の よう に 置き 換わる イメ ー ジ で す 。 


古関 数 の 実行 前 


Yar resu1t = ca1c(): 


古関 数 の 実行 後 





この スク リプ ト の 実行 の 流れ を 図 太 する と 、 次 の よう に な り ま す 。 
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funotion Ca1c() 人 {= 二 --ーーーーーーーーーーーーーーーーーーーーーーーーーーー・ 


Yar num = 0 


Or (Va エエ ユ 1=17 ユ <=107 1 ユ ++) { 


num += 1 関数 の 実行 | 
0 中 @ の 呼び出し 
) 
て ら G 七 いて エロ Y 
) 1@ 戻 O 値 の 
8 YeG8u] = Ca1C() 』 .-------ー-ーーー ニ ーーー ニー ニー ニー ここ ーーーー 


congo1e.1od (reSu1) : 


な お 、 戻 り 値 を 一 度 変数 に 代入 し な く て も 、 関 数 を 呼び 出し て 戻り 値 を コン 6 
ソー ル に 表示 する だ け で あれ ば 、 次 の よう に 1 行 で 記述 する こと も 可能 で す 。 


conso1e.1ogq(ca1c() ) 』 


スク リプ ト は 丸 か っ こ () の 内 側 か ら 実 行き れる の で 、 ま ず calc 関数 が 実行 さ 
れ 、 次 に コン ソー ル へ の 出力 が 行なわ れ ま す 。 


conso1e.1oq (ca1c() ) : 
リ 内 側 の ca1c ( ) が 実行 され 、 戻 り 値 が 返却 され る 
conso1e.1oq(55): 
実行 イメ ー ジ 


リス ト 6.4 は 、 引 数 と 戻り 値 の 両方 が ある 関数 で す 。 円 の 半径 を 引数 と し て 


渡す と 、 円 の 面積 を 求め て 戻り 値 と し て 返し ます 。 こ の よう に 、 関 数 の 中 か ら 
別 の 関数 を 呼び 出す こと も 可能 で す 。 


リス ト 6.4 引数 と 戻り 値 が ある 関数 の 利用 





funotion cal]cCirc]e(radius) { 
て ら @G い un ad1US * エ ad1uU8 * 3.14』 
) 


function ca11Func() { 


yar area = Ca]cCirc1]e(5)』 
と Gu エエ mn コ エ G8j』 
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congole.1od (ca11FunC () ) : 





証 実 行 結果 
function ca1cCirc1e(radius) 人 { = 二 --ーーーーーーーーーーーーーーーー 
ど @ も AF YAQ1UB * raAQ1LUB * 3、 上 4 ・=ees< ・ 呈 @ calcCircle 開始 
|@ calcCircle 終了 
function ca11Func() 人 { <--ーーーーーーーーーーーーーーーーーー トーーーーーー ュー 
var area = caloCirc1e(5) ーーーーーーーーー 00 も 
sbilo ・ | callFunc 開 始 
} H@ callFunc 終 了 
congo1e.1og(ca11Func () ) : ーーー 0 MA 
実行 イメ ー ジ 
6M9U 










y 関数 は 引数 を 受け 取り 、 戻 り 値 を 返す 。 
関数 は 定義 し た だ け で は 実行 され な い 。 呼び出し を 行なっ た 


タイ ミン グ で 実行 され る 。 


| Heidiee csr 本 | 


Q 1 以下 は 、 受け 取っ た 引数 を コン ソー ル に 表示 する 関数 で す 。 こ の 関数 を 
呼び 出し 、 コ ン ソ ー ル に "ABC" と 表示 する に は どの よう な 文 を 記述 すれ 
ば 良い で すか ? 


Eunction func(x) { 
Con8ole.1o す (XX) : 
) 


る ⑳ ある 関数 内 で 、 変 数 x の 値 を 戻り 値 と し て 返す 文 は どの よう に 記述 し ま 
すか ? 





つ 解 答 は 巻末 に 掲載 
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組み 込み 関数 


前 節 で は 、 関 数 を 自分 で 定義 する 方 法 に つい て 学び まし た が 、JavaScript 
に あら か じ め 用 意 き れ て いる (組み 込ま れ て いる ) 関数 も あり ます 。 こ の よ 
うに T]avaScript が すでに 備え て いる 関数 の こと を 組み 込み 関数 と 呼び ます 。 
TavaScript に は 数 多く の 便利 な 組み 込み 関数 が あり ます が 、 こ こ で は よく 使う 
も の を 紹介 し ます ( 表 6.1)。 





表 6.1 組み 込み 関数 一 覧 








関数 名 説明 





parseFloat 。 。 | 文字 和 型 の 数 字 列 を 数 値 型 (実数 ) に 変換 する 
isNaN 。  。 | 指定 され た 値 が NaN で ある か どう か 調べ る 
指定 され 大 文字 列 を URL エン コー ド す る 
指定 され た 文字 列 を URL デコ ー ド する 


【URL エ ンコ ー ド ノン デコ ー ド 】 販 厚 近 

URL と し て 使用 で き な い 文字 を 、 特 殊 文字 に 変換 する こと を URL エン コー 
ド と 呼び ます 。URL エ ンコ ー ド され た 文字 を 元 の 状態 に 復元 する こと を URL 
、 デ コー ド と 呼び ます 。 ) 


数 値 変換 に 関す る 関数 


文字 列 型 の 値 を 数 値 型 の 値 に 変換 する 関数 2 種 と 、 数 値 の 演算 結果 を 調べ る 
関数 を 紹介 し ます 。 

最初 に Darselnt 関 数 の 利用 例 を 示し ます 。parseInt は 、 引 数 と し て 指定 き 
れ た 文字 列 を 整数 型 に 変換 し 、 戻 り 値 と し て 返す 関数 で す 。 











149 








軸 w O ri 隊 昌 HH 
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リス ト 6.5 parselnt の 利用 


ザ あ めど 8EY ma WV1LO" ょ 
console.1od す (str + 10)』 


Ya num = par8eTnt (gst 了 ) : 
console.1od す (num + 10)』 





時 実行 結果 









ッッ 4 


リス ト 6.5 で は 、 文学 列 型 の 10 を 数 値 型 の 10 に 変換 し て 変数 num に 格納 し 
て いま す 。 こ の と き 、 変 数 str の 値 は 文字 列 型 の まま で ある こと に 注意 し て くだ 
さい 。 


par8eTn 


隊 文字 列 】 数 値 
1000 ("人 


が を 27EVWDPE か 和 換 0 


贅 値 型 の 変数 





リス ト 6.5 の 実行 イメ ー ジ 


な お 、 引 数 に 指定 する 文字 列 が 小数 点 を 含む 場合 は 、 実 数 型 に 変換 する 
parseFloat 関 数 を 使い ます 。 利 用 方 法 は parseInt 関数 と 同じ で す 。 

parselnt 関数 や parseFloat 関数 は 、 ア ルフ ァ ベ ッ ト な どの 数 値 に 変換 で き な 
い 値 が 引数 と し て 指定 され た 場合 に 戻り 値 と し て NaN を 返し ます 。NaN は 、 
演算 結果 が 数 値 に な ら な か っ た こと を 表わす 特殊 な 値 で す 。 

結果 が NaN に な っ て し まっ た 場合 、 演 算 失 敗 な か の で エラ ー 処 理 を 行なう 必要 
が あり ます 。 値 が NaN で ある か どう か を 調べ る に は iSNaN 関 数 を 使い ます 。 


リス ト 6.6 jsNaN の 利用 


Var 8 上 tr = "AV: 
Yar num = par8eTn (8 上 了 ) : 


if(isNaN(num) ) { 


conso1e.1og( "変換 失敗 ") : 


) 








isNaN 関数 は 、 引 数 と し て 指定 され た 値 が NaN で あっ た 場合 に true を 返し ま 
す 。 リ スト 66 で は 、 ア ルフ ァ ベ ッ ト を parseInt 関数 で 数 値 型 に 変換 し よう と し 
て いる た め 、 変 換 に 失敗 し て 変数 num に NaN が 代入 きれ ます 。 


エン コー ドン デコ ー ド に 関す る 関数 








Web 上 で 文字 列 を 送信 する 場合 、 全 角 文 字 や 一 部 の 記号 は その まま の 状態 
で は 送信 で き な い た め 、 送 信 可 能 な 状態 に 変換 し ます 。 こ の 作業 を URL エン 
コー ド と 呼び ます 。 

試し に 、Yahool 検 索 で 「 関 数] と 入力 し て 検索 する と 、 ブ プラ ウザ の アド レス 
バー に 以下 の よう な 文字 列 が 表示 され ます 。 






色 が 付い た 箇所 が エン コー ド さ れ た 文字 列 で す 。 こ の 文字 列 を 元 に 戻す ( デ 
コー ド す る ) と | 関数 ] と いう 文字 列 に な り ま す 。 一 部 の プラ ウザ に は 全角 文 
字 が デコ ー ド し た 状態 で 表示 され る 設定 に な っ て いる も の も あり ます 。 そ の 場 
合 は アド レス バー の 文字 列 を コピ ビー し て テキ スト エディ タ な ど に 貼り 付け て み 
る と 、 エ ンコ ー ド され た 文字 列 が 確認 で きる は ず で す 。 
エン コー ド 

関数 "ニチ (6E9%96%A27%E67%957%BO0" 
デコ ー ド 

エン コー ド と デコ ー ド 

通常 、 文 字 列 の 送信 に は HTML の フォ ー ム を 利用 し ます 。 フ ォ ー ム か ら デ ー 
タ を 送信 する 場合 は 自動 的 に URL エン コー ド が 行なわ れ ま す が 、JavaScript で 
別 の ペー ジ に デー タ を 送信 する 場合 は URL エン コー ド が 行なわ れ ま せん 。 そ こ 
で 、 送 信 前 に encodeURIComponent 関 数 を 使っ て URL エン コー ド を 行 な 
う 必 要 が ある の で す 。 
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pn か や 生か 全 人 ザ 1 ポ 」 MM かり かゆ ゆ ツヤ サ せ す TWO TOTYYYWPLYT パ YYV で tntWY の nn が rtAMMUALAMUAAALIMAAMMMIMAJALMMIMUALUMM ひ ひも WiLLviuyiwytt り みい bf か もり ツル も OM ゅ iir ゆ ひ ル ルリ サリ ルル 作り MWh ルル ツル ルル 0 の ひ ツ サ ゆ すり 必 / 
4 第 宣 は 拓本 時 肝 提 HHH 入 2HHH は H8 失 抽 HEHH34KRRHSHHHHKHHHHHR 失 投 HHHDKtE は は HEREHHDHREHEHH3YRRGHHEH3R は HHR 


リス ト 6.7 encodeURIComponent、decodeURIComponent の 利用 


yar encode = encodeURTComponent ("こん に ち は 『") : 
congo1e . 1og (enCode) 


yar decode = decodeURTComponent (GenCode) : 
congo1e.1oq (decode) : 








田 実 行 結果 
ゃ E3 も 81%93%E3 も 82%93 も E3%81% も ABE3 和 も 81%A1$E3S81%AF 
ンス - MNONNO (00 


encodeURIComponent 関数 と decodeURIComponent 関 数 は 、 引 数 に 指 
定 さ れ た 文字 列 を エン コー ド ま た は デコ ー ド し て 、 変 換 後 の 文字 列 を 戻り 値 と 
し て 返し ます 。 こ の 関数 を 使っ た TavaScript に よる デー タ の 送信 方 法 は 第 13 草 
で 紹介 し ます 。 





p JavaScript に は あら か じ め 便 利 な 関数 が 用 意 さ れ て いる 。 そ れ を 組み 込 
み 関 数 と 呼 点 。 


p 文字 列 型 の 数 字 を 計算 処理 な ど に 使う 場合 は 、parselnt や 
parseFloat で 数 値 型 に 変換 する 。 


p Web 上 で 文字 列 を 送信 する 場合 は URL エン コー ド を 行なう 必 
要 が ある 。 


et に) 貴 … 


Q⑳ 1 ある 文字 を 文字 コー ド 番 号 に 変換 する こと を な ん と 呼び ます か ? 


⑳ る ⑳ parselnt 関 数 で 数 値 型 へ の 変換 が で き な か っ た 場合 、 戻 り 値 と し て 返さ 
れる 値 は な ん で すか ? 





ご 解答 は 巻末 に 掲載 
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⑳)) スコ ー プ と は 


変数 に は 、 ス コー プ (有効 範囲 ) が 設定 され て いま す 。 ス コー プ は 、 そ の 変 
数 が スク リプ ト 中 の どこ か ら ど こま で の 範囲 で 利用 で きる の か を 表わし ます 。 
]avaScript に は 、 表 62 に 示し た 2 つの スコ ー プ が あり 、 ど ちら の スコ ー プ に な 
る か は 変数 の 宜 言 方 法 に よっ て 変わ り ま す 。 











表 6. ら JavaScript の スコ ー プ 
種類 説明 PO 


関数 の 外側 で 宣言 し た 変 





MAMA で きる | 関数 の 内 側 で 宣言 し た 変数 
あの 内 の て の の 衣 際 を 生 馬 ん きる の 数 


グロ ー バ ルス コー プ の 変数 は グロ ー バ ル 変 数 、 ロ ー カ ルス コー プ の 変数 は 
ロー カル 変数 と 呼び ます 。 











グロ ー バ ルス コー プ =。。 ロー カル スコ ー プ A 
| 3 壮 と と で も nA 、 3F 以外 は 入れ な い ) 
5 が a mA ペ 7 Aa ん 
衣 |。 詳 。 ロカ ルス コー ブ B 
「 | 上 | ストン.。 つ 1FIt は 入れ な い ) 
C さ ん NIIV B さ ん 
スコ ー ブ プ の イメ ー ジ 


で は 実例 を 見 て み ま し ょ う 。 
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mmD。5HPTPTTTP'「「 PPTTHHIHHHHHTHIH 


ュー ご ュー 8 24c TE 


グロ ー バ ルス コー フ プ 


CDU MS 





リス ト 68 で は 、 変 数 str の 宣言 を 省略 し て いま す 。 こ の よう に する と 
JavaScript が 暗黙 的 に グロ ー バ ル 変 数 と し て 宣言 を 行なっ て くれ ます 。 グ ロー 
バル 変数 は どこ か ら で も 参照 で きる た め 、 関 数 の 内 側 と 外側 の どちら か ら で も 
間 題 な く 変 数 の 値 が 出力 され ます 。 





リス ーー 9 Loss 


ロー カル スズ コー プ 


0 
conao1e- 1og (cr: 0 


Func () 
congo1e . 1og ( 8 上 了 ) : // エラ ー : 関数 外 で は ロー カル 変数 を 扱う こと が で き な い 





W( 5) すり MP) 
IM Mu か II 
f 





リス ト 69 を 実行 する と エラ ー が 発生 し ます 。 エ ラー メッ セー ジ の 文言 は プラ 
ウザ に よっ て 多少 異な り ま す が 、「 変 数 str が 定義 さ 8 きれ て いな い 」 と いっ た 内 容 
が 表示 され る は ず で す 。 関 数 の 内 側 で 変数 宜 言 を 行なう こと で 、 そ の 変数 は 関 
数 内 で の み 有 効 な ロー カル 変数 と な り ま す 。 よ っ て 、 関 数 の 外側 か ら 変 数 str 
の 値 を 出力 し よう と し て も その よう な 名 前 の 変数 は 見 つか ら な いと いう 結果 に 
な る の で す 。 
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K3 スコ ー プ の 注意 点 と 使い 分 け 
で は 、 異 な る スコ ー プ で 同名 の 変数 を 使う と どう な る で し ょ うか 。 


リス ト 6.10 異な る スコ ー プ の 同名 の 変数 


Y& と ど 8 ヒモ = "グロ ー パ ル 『 ょ 

Eunction func1() { 
8& と 8EY = “上 unmC1"2 
conso1e . 1oqd (8 上 了 エ ) 


function func2() { 
ザ る ある Y ア 8 上 ヒエ = "上 UnC2『。 
congo1e . 1od (8 上 了 ) : 


Funoc1 () 』 
Func2 () 
conso1e.1oqd (8 上 了 エ ) 





リズ スト 6 な 10 で は 、 グ ロー パル メロー プ と 。 hincl の ロー カル スコ ー ザ ゲ 、 func2 
の ロー カル スコ ー プ に それ ぞ れ str と いう 名 前 の 変数 が 存在 し て いま す 。 名 
前 が 同じ で あっ て も スコ ー プ が 異な る 場合 は まっ た く 別 の 変数 と し て 扱わ れ 
ます 。 よ っ て 、3 つ の str は すべ て 異な る 変数 で ある と いう こと に な り ま す 。 
func1 関数 と func2 関数 か ら は グロ ー バ ル 変 数 の str と ロー カル 変数 の str 両方 が 
参照 で きま す が 、 両 スコ ー プ に 同名 の 変数 が ある 場合 は ロー カル 変数 の ほう が 
優先 され ます 。 


var 開 証 識 = "グロ ー バ ルリ":』 
function func1() { 
var 麻 較 識 = "Func1") 


ロー カル スコ ー プ | 


congo1e . 1od (8 上 了 ) : 


funotion func2() { グロ ー バ ルス コー プ 
var 隙 畑 識 - "func2": 
ロー カル スコ ー フ 


congso1e.1og (str) : 


Funo1 () 
FuncC2() 





conso1e .1od (8 上 エ ) : 
リス ト 6.10 の 変数 の スコ ー プ 


また 、 ロ ー カ ル 変 数 は 関数 が 呼び 出さ れる た びに 値 が 初期 化 さ れ て し まい ま 
す が 、 グ ロー バル 変数 は ペー ジ が 更新 され な い 限 り 氷 続 的 に 値 を 持ち 続け る こ 
と が で きま す 。 


リス ト 6.11 グロ ー バ ル 変 数 の 値 の 変 移 


var loba] = 0』 
function func() { 
すす 1ODba ユ ++』 

) 


for(var 1=0: 1 < 10: 1++) { 
Func() 


) 


congo1e.1og (gl1oba1 ) 





リス ト 6.11 で は 、func 関 数 内 で 変数 global を イン クリ メン ト し て いま す 。 グ 
ロー バル 変数 の 値 は 保持 され 続け る の で 、func 関 数 が 呼び 出さ れる た びに 変数 
global の 値 が 増え て いき ます 。 





var 91oDbal] = 0: 10 回 呼び 出さ れる 


Funotion fFunc() 人 { 邊 <-ーーーーーーーーーー 







す J1Oba++ 


変数 global は 
グロ ー バ ルス コー プ 内 で 


で oyar 1s07 1 < 10》 1 は ++) 値 が 保持 され 続け る 


funC() ーーーーーーーーーーーーーーーーーーーーー 


J 


conso1e.1oq (q1oba]1 ) 
値 の 変 移 の イメ ー ジ 


スコ ー プ の 使い 分 け で す が 、 基 本 的 に は ロー カル 変数 を 利用 する も の と 思っ 
て くだ さい 。 グ ロー バル 変数 を 使う と 、 複 数 の ]avaScript ファ イル (js ファ イ 
ル ) を 読み 込ん だ 際 に 変数 名 が 衝突 し 、 互 い の ス クリ プ ト に 影響 を 与え て し ま 
う 可能 性 が ある た め 、 あ まり 好ま し く あ り ま せん 。 複数 の 関数 か ら 1 つ の 変数 
を 扱う 場合 や 、 ペ ー ジ が 開い て いる 間 、 値 を 保持 し 続け た い 場 合 な ど に は グ 
ロー バル 変数 を 使っ て も 良い で す が 、 必 要 最 小 限 に 抑え を る よう に し まし ょ う 。 










| < く 8C エ 1D 上 8rC="A.]8"></ 8C エ lp 上 > 
く 8C エ 1 エ D 上 8rC="B.]8 リ ></ 8C エ 1p セ > 


ク グロー バル 人 変 
の 7 レベ 
var x = "hoge"z 
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p 変数 に は 有効 範囲 (スコ ー プ ) が あり 、 そ の 範囲 内 で の み 扱 うこ 
と が で きる 。 


p 変数 の 宣言 方 法 に よっ て スコ ー プ が 決定 され る 。 


還 6heck 宇 est 3 


Q 1 以下 の スク リブ ト 中 の 変数 x と y は それ ぞ れ グロ ー バ ル 変 数 と ロー カル 変 
数 の どちら で すか ? 


ザ あ だ な けり ) 

function func() { 
Va8Y = 10』 
console.1od(x + ): 





J 


UTC() 》 


Q る 以下 の スク リプ ト 中 の 変数 x と y は それ ぞ れ グロ ー バ ル 変 数 と ロー カル 変 
数 の どちら で すか ? 


function func(x) { 
= 102 
congole.1od(x + ツ ): 


) 


func(20) 





ご 解答 は 巻末 に 掲載 
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%) 関数 の 代入 と 匿名 関数 


最後 に 、 知 っ て いる と 役に立つ 、 一 歩 進ん だ 関数 の 記述 方 法 に つい て 学び ま 
す 。 ま ず は 関数 の 代入 で す 。 

関数 は 、 数 値 や 文字 列 の よう に 変数 に 入れ て 扱う こと が で きま す 。 こ の 方 法 
を 使う と 、 条 件 に 応じ て 異な る 関数 を 変数 に 設定 し た り 、 関 数 を 引数 と し て 別 
の 関数 に 渡し た り と 、 よ り 和 柔軟 に 関数 を 利用 で きま す 。 








se 関数 の 代入 


変数 名 = 定義 済み の 関数 名 


代入 の 例 を 見 て み ま し ょ う 。 





リス ト 6.12 関数 を 変数 へ 代入 する 


funotion sayHe11o() { 
console.1od(" こ ん に ち は 『) 
) 


Var ff = gayHe11Oz 


リス ト 6.12 で は 、sayHello 関数 を 定義 し て 、 変 数 f に 代 人 人 し て いま す 。 代入 
する と き は 関数 名 の 後ろ る に 丸 か っ こ () は 付け ませ ん 。 
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nMO ei 






関数 は 変数 に 代入 で きる 






関数 の 代入 


また 、 関 数 の 定義 と 変数 へ の 代入 を 同時 に 行なう こと も で きま す 。 こ の よう 
な 式 を 関数 式 と 呼び ます 。 





関数 式 は 、 以 下 の よ うに 使い ます 。 


リス ト 6.13 関数 の 定義 と 変数 へ の 代入 を 同時 に 行なう 


var f = funotion sayHe11o() { 
console.1od( "こん に ち は 『) 』 
75 


た も 2 





リス ト 6.13 の よう な 記述 を 行なう と き に 気 を つけ な けれ ば な ら な い の は 、 関 
数 定義 ブロ ッ ク の 閉じ か っ こ (|) の 後ろ の に モミ コロ ン (:) を 付け る こと で す 。 
どこ まで が 変数 f に 代入 する 値 な の か を 明確 に し まし ょ う 。 次 の よう に 、 変 数 
に 代入 する 値 が 数 値 で あろ うと 関数 で あろ うと 、 同 じ よ うに 記述 する と 理解 し 
て お け ば 良い で し ょ う 。 


// 数 値 の 代入 
Var f = / 
// 関数 の 代入 0 


Yar 全 = Fur 


): 












リス ト 6.13 で は 、 関 数 sayHello を 変数 f に 代入 し 、 以 降 は 「f] と いう 変数 名 


を 使っ て 関数 を 呼び 出し て いま す 。 こ の よう に 関数 名 を 使わ な い 場 面 で は 、 関 
と くめ い 

数 名 の 省略 が 可能 と な っ て いま す 。 関数 名 を 省略 する と 、 名 前 の な い 匿 名 関数 

と な り ま す 。 


リス ト 6.14 匿名 関数 の 代入 


var f = funotion() ({ 
console.1oqd( "こんにちは") : 


1 す 


F()》 








還 実 行 結果 










名 前 が な い (無名 の ) 関数 を 変数 に 代入 






console.log('" こん に ち は "): 


名 前 の な い 匿 名 関数 に な る 。 
この 関数 を 実行 する 場合 は 
変数 名 を 使う 


匿名 関数 











関数 は 定義 し た だ だ け で は 実行 され ず 、 呼 び 出し を 行なっ て 初め て 動作 する も 
の で し た 。 し か し 、1 回 だ けし か 呼び 出し を 行なわ な い 関数 の 場合 、 名 前 を 付 
け て 定義 し た 後に 呼び 出し を 行なう 、 と いう スク リプ ト を いち いち 記述 し て い 
る と 冗長 な スク リプ ト に な っ て し まい ます 。 そ の よう な と き は 、 定 義 と 同時 に 
すぐ に 実行 され る 即時 関数 を 使い ます 。 
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( Eunction (引数 を 入れ る 変数 ) {処理 ) ) (引数 と し て 渡す 値 ) : 
匿名 関数 の 定義 定義 し た 関数 の 呼び 出し 





記述 方 法 は 、 匿 名 関数 の 定義 を 丸 か っ こ () で 囲み 、 さ ら に その 後ろ に も う 1 つ 
丸 か っ こ () を 付け て 引数 を 渡し ます 。 引数 を 省略 する 場合 も 丸 か っ こ () は 必ず 
必要 で す 。 

利用 例 は 次 の と お り で す 。 


リス ト 6.15 即時 関数 の 利用 


(Eunction (name) { 
congole.1od(name + "さん 、 こ ん に ち は 『"): 
) ) ( "よしお") 』 





スク リプ ト 全 体 が 匿名 関数 の 定義 と 引数 で 構成 され て いる の が わか り ま す 。 


引数 を 渡し て 匿名 関数 を 実行 






軸 革 名 関数 の 定義 (W ま し お ? 
0 引数 巴 20600NCAMGOMM7AOOONAOSAMMANA 
匿名 関数 の 構成 


y 記述 方 法 次 第 で 名 前 の な い 関 数 や すぐ に 実行 され る 関数 を 作る こ 


と が で きる 。 
y 関数 の 定義 文 を 値 と し て 扱う 記述 方 法 を 関数 式 と 呼ぶ 。 
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仙 427 
令 放 明 提 4 3 0N202002 0 


この 草 の 到 達磨 チ ェ ッ ク 





⑳ 1 以下 の 関数 は 、 三 角形 の 底辺 と 高 さ を 引数 と し て 受け 取り 、 面 積 を 戻り 
値 と し て 返し ます 。 空 欄 を 埋め 、 底 辺 が 30、 高 さ が 50 の 三角 形 の 面積 
を 求め る 関数 を 完成 させ て くだ さい 。 


Eunoction ca]cTriangle(base, height) { 
return Dase * heiqht / 2 
J 


var area =| _ 6 |: 


conso1e.1oq(area) 


Q2 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 





Var n = Par8eFrloat("10.5"): 
if(!1igNaN(n) ) { 
console.1og( "OK") : 
) e1gse { 
conso1e.1oq( "NG") : 
) 


QOS 以下 の スク リプ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


あま ざ K = 1 ユ 10 
Eunction plus() { 
X += 20』 


plu8(): 
console.1oq (XX) : 


Q4 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


Va エミ メニ = 10』 

funotion plus(x) { 
4 本 6 」 

J 


D1u8S (XX) 』 
Con8ole.1oq (XX) : 


QB 空 棚 を 埋め 、func 関 数 を 変数 f に 代入 する スク リプ ト を 完成 させ て くだ 
さい 。 
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wwwuaAawwww ォ sha  “ 生生 打 夫 料 り ドド に に で こ ド ーー アテ hmNWWNIWN まず 人 ま 半 才 ま まり WWW 和束 WWWNIE WNWwwnWm ま サパ ゴ ポ MWTNY さ キザ 洛 で きす 導 計 SW ず iiNIWA ま WM キネ で WW WWW ヤル AUW ホ W ネ WMmW 症 硬 % ず NN 1 ナ Te か 拓 W や WW し WW WW ル 生生 WW ます. 症 ドル ホキ WM W ま 作 A で ヤ ペ ポイ ペド すず ネオ キャ ャ WWYNFYW 和 を ルル 
ます WhNWUW 誠人 細 起 ま WW OO no〔o〔 ITYTTEI CRERRAIALALSLSLUSSSSMB2ULRuINMNJLL」 WWy 玉 We 者 WW TEASRSREL SE UEHNURISMEBRSIR ま NO 1YMWN も W ず ポキ ギル た WM ポ WYNWWPwY ル ルト WW や NNANMWWNW パ PFP ヤ キオ NAMWWMWYWWWNODP や WWWE ま WNWNMAWNW ギ キオ NNW ず ず ギ 衝動 WWIY 
* WWwAWWwwMd A か 、 者 ま 和 失 も WMI や TANWW や WWNNNWNMNNMWAMNINWNMNMNNNNWMWNW ザ ヤリ MNTNNNNWY WW LIES まお WNWNWNWNNWUPY キ ポル ポ ゆ M ぜ まず NNMWWYNWWNWMWMNWWWWMITYNWAN ま WW や NNMMW 導 WW か WWWNW キ ポポ まま NW や NNWAWW や NNNWWNWYNWS WWWNNNWMNWMWNIRNtWAWWWM も WeWAWWwwMw 
WW 上 ル NW WW や WWW 「 ま 」 し WE2WAAUAWMUMWMAPWVWMMYAWWNWM ま WWWWW WDW ルカ MM が 征 了 N が W 介 凍り が WW が WWW ま WMO 生 の 本 リ WAN mMWNWWAMMWNNN4MW や WNWWWWNTWMKWWW 電 WWWWW 皇 ず 衝 人 町 光 凍 征 着 誕 ル WW 愉 W 旧 用 WW 人 W 旧 W 作 上 W 導 人 衝 必 半生 放 か 滞 症 キ 江 提 WWA 
叶 び か も 0① ひ 0( 生還 BZ) 症 還 YWEPSEZULLLSJAUELUAAAALLLDAALAALLMUA は は LA は ル ん し し LM し LIU あ LLSLIMMMMUgSMMM LM ua AWSW ド WW WWwWNlWWMW 衝 \ 革 選 WW 才 WWNNWWNN ま WW 囚人 居 導電 WWNAW ま W さ WANWWMNMMWINNWWA0 ま る で WW ポ ポル トペ ドド WNW や WNWWWNRMNNWW 生 て まき ル 6 


function func() { 
congo1e.1oq( "ABC") : 


- mm 


Q@ 以下 の 関数 を 呼び 出し 、 コ ン ソ ー ル に "ABC" と 表示 する に は 、 ど の よう 
な 文 を 記述 すれ ば 良い で すか ? 


var f = funotion (xx) { 
congo1e.1oqd(X) : 


} 
Q7 空欄 を 埋め 、 コ ン ソ ー ル に "こん に ち は " と 表示 する 関数 を 実行 する スク 
リプ ト を 完成 させ て くだ さい 。 


(Eunction (gt て) { 
congo1e. 1oqg (8 上 了 ) : 


MM =※5※※ 5 目 


ご 解答 は 巻末 に 掲載 


164 





オブ ジェ クト の 大 礎 








この 章 で 学ぶ こと 。 
20 ナ エン メント 、 
プロ パテ ィ 

Call apply メソッド 
Array オブ ジェ クト 
String オ ブ ジ ェクト 
止 規 表現 








明 0 時 時 提 折 


⑯ オブ ジェ クト は 「 プ ロバ ティ 」 と 「 メ ソ ッ ド 」 を 持っ て いる 殺 


文字 列 や 数 値 、 関 数 な ど 、 「 プ ロ パ ティ 」 は 、 属 性 と いう 意味 で 、 
JavaScript で 扱う モノ (デー タ ) は 数 値 や 文字 列 な ど 、 
すべ て オブジェ クト で す 。 オブジェ クト が 持つ 情報 の こと で す 
オブ ジェ クト は それ ぞ れ 「 プ ロ パ ティ 」 と 
「 メ ソ ッ ド 」 を 備え て いま す 


レ 間 ア アム 史 ア に 了 
名 前 : ロ ボ 助 


“ 年 齢 :2 歳 
「 体重 :360kg 


| 。 
位 (叶い NM Te TiarKFafNe さ 。 





「 メ ソ ッ ド 」 は 、 動 作 や 振る 舞い JavaScript に は 、 た くさ ん の 
と いう 意味 で 、 オ プ ジ ェ クト が 持つ 』 オブ ジェ クト が 用 意 さ れ て いま す 。 
関数 (処理 ) の こと で す 。 こ れ を 使っ て これ ら を 使う こと で 、 

オブ ジェ クト に 命令 で きま す さま ざま な 処理 が で きま す 


を 





オブ ジェ クト は JavaScript の 要 で す 。 オブ ジェ クト の 基礎 を し っ か り と 理解 
し 、JavaScript の オブ ジェ クト を 効果 的 に 活用 で きる よう に な り ま し ょ う 。 
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オブ ジェ クト 、 メ ソ ッ ド 、 
プロ パテ ィ 





%9) オブ ジェ クト と は 


文字 列 や 数 値 、 関 数 な ど 、TavaScript で 扱う デー タ は 、 実 は すべ て オブ ジェ 
クト で す 。 も っ と 具体 的 に 言う と 、TavaScript の オプ ジェ クト と は 、 キ ー と 値 
の 集合 体 の こと で す 。 第 4 章 で 学ん だ 連想 配列 を 思い 出し て くだ さい 。 これ は 
オプ ジェ クト の 別名 で す 。 








ya favortteg = { food : "カレ ー"。 oo1or : "至り"。 number : 7 本) 


連想 配列 


数 値 や 文字 列 な ど を 値 と し て 持つ 要素 は プロ パテ ィ 、 関 数 を 値 と し て 持つ 妥 
素 は メソ ッ ド と 呼ば れ ま す 。 


グン エン か 


メソ ッ ド 


or 





結局 の と と ろ 、 メ ソ ッ ド = 関数 で す 。 オ ブ ジ ェクト で は 関数 の て と を メ 
ソ ッ ド と 呼び 、 と 考え る と 理解 し や すい で し ょ う 。 





で は オブ ジェ クト の 作成 例 を 見 て み ま し ょ う 。 
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人 


リス ト フ ア .1 オブ ジェ クト の 作成 


< !DOCTYPE html> 
<htm] ]anqd="]a リ "> 
<head> 
<meta Char8et="utfF-8 リ "> 
< 上 1 上]e>JaYaSCr1p 上 の 練習 </ モ 1t1e> 
< く 8C エ 1p セ > 
var ob] = { 
name: "よし お "。/ | 「 
greet : funocton() {| congso1e.1og( "はじめまして "): } 


} 
ob] .greet ( ) 要素 の 値 と し て 関数 を 指定 


く / 8C エ 1p セ 上 > 
</head> 
<DOdQY> 
</ body> 

</htm1 > 





記述 方 法 は 基本 的 に 第 4 章 で 学ん だ 連想 配列 と 同じ で す 。 要素 の 値 と し て 関 
数 を 指定 する こと で メソ ッ ド を 作成 で きま す 。 こ の と き 、 関 数 名 が 必要 な こと 
は ほとん ど な い の で 匿名 関数 に し て 良い で し ょ う 。 メ ソ ッ ド を 呼び 出す に は 、 
関数 名 の 代わ り に キー を 指定 し ます 。 


メソ ッ ド の 作成 


ya& デ オプ ジェ クト 名 a {( キー : 関本 04v 3 


as メソ ッ ド の 呼び 出し 
var オブ ジェ クト 名 。 キ ー 
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%⑳) this キー ワー ド 


オプ ジェ クト の 中 で は 、thiS と いう キー ワー ド は 自分 自身 の オプ ジェ クト の 
こと を 指し ます 。 あ る メソ ッ ド の 中 で 、 自 身 が 所 属す る オプ ジェ クト が 持つ 別 
の メソ ッ ド や プロ パテ ィ を 利用 し た い 場 合 、 先 頭 に 「this.」 を 付け て 使い ます 。 








リス ト 7.2 オブ ジェ クト の 中 で の this キー ワー ド 


Va OD] = 
name: "よし お "。/ 
greet: funoction() { 
console.1og(thig.name + "で す 、 は じ め ま し て 『): 
) 
す 


ob] .dreet ( ) 





リス ト 7.2 で は 、this キー ワー ド が 表わす の は obj オ ブ プ ジ ェ クト な の で 、this. 
name は objname と 記述 し た の と 同じ こと に な り ま す 。 


gbj - ( | eobj を 表す | 
rot 引 「 this は obj を 表わす 
greet: funotion() { ヤ 

Ehiag.name + "で す 、 は じ め ま し て ") 』 
) 








conso1e.1og (thi 


】 7 
ob] .qdreet ( ) 


⑳)) 別 の オブ ジェ クト の メソ ッ ド を 利用 する 


メソ ッ ド は オプ ジェ クト の 所 有 物 な の で 、 通 常 、 他 の オプ ジェ クト が 使う ( 呼 
び 出 す ) こと は で きま せん 。 そ こ で 、 あ る オブジェ クト か ら 別 の オプ ジェ クト 
の メソ ッ ド を 呼び 出す Call メ ソ ッ ド と いう 特殊 な メソ ッ ド が 用 意 き れ て いま 
す 。 
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通常 の 呼び 出し | イフ ジェ クト B 


MM “ オブ ジェ クト A の 
メソ ツ ッ ド > 下 環 還 旨 昌 昌 陸 776325 和 1 


本 時 Cal1 に よる 呼び 出し 
別 の オブ ジェ クト の メソ ッ ド を 呼び 出す 





call は |「 別 の オプ ジェ クト の メソ ッ ド を 借り て 、 自 分 の メソ ッ ド の よう に 披 
う 」 こと が で きる と て も 便利 な メソ ッ ド で す 。 す べ て の メソ ッ ド が 、 こ の call 
メソ ッ ド を 利用 で きま す 。 


call メ ソ ッ ド 


メソ ッ ド を 所 有する オブ ジェ クト . メ ソ ッ ド 名 .ca11 (メソ ッ ド を 借り る オブ ジェ クト ) 





まず は リス ト 7.3 を 見 て くだ さい 。 


リス ト 7.3 call メ ソ ッ ド の 利用 


var ob]1 = { 
name: "よし お り ",/ 
greet: Funotion() { 
Con8ole.1od(thig.name + "で す 、 は じ め ま し て 『)』 
) 


1 す 


var ob]2 = { 


name: "ユリ イリ 


1 す 


ob] 1 .dreet . ca11 (ob]2) 』 





硬 実 行 結果 

ユリ さん は 、「 よ し お きん が 持っ て いる メソ ッ ド を 自分 も 利用 し た い 」| と 
いう こと で call メ ソ ッ ド を 使っ て いま す 。 す る と あたかも ユリ 子 さ ん が 自身 の 
メソ ッ ド を 呼び 出し た か の よう に greet メ ソ ッ ド が 実行 きれ ます 。 こ の と き 、 
greet メ ソ ッ ド 内 の this キー ワー ド が 表わす の は ユリ 了 チ さん (obj2) に な り ま す 。 


ob] 1 .dreet .oa11 (ob] 2 ) 』 


メソ ッ ド の 所 有 者 メソ ッ ド を 借り る 人 


メソ ッ ド を 借り て いる 間 は 所 有 権 も 借り て いる 人 に 移る 、 と いっ た イメ ー ジ 
で ず 。 


greet 





funotion 
thiS.name 
greet 
メソ ッ ド を 
貸し 出す 


別 の オブ ジェ クト の メソ ッ ド を 一 時 的 に 借り る イメ ー ジ 


借り る メソ ッ ド に 引数 が ある 場合 は 、call メソ ッ ド の 第 2 引数 (2 つ 目 の 引数 ) 
以降 に 指定 し ます 。 


* 
4 
* 
- 





リス ト フ 7.4 引数 の ある メソ ッ ド を call メ ソ ッ ド で 呼び 出す 


ザ & と ア ObD]1 = 


name: " し お ", 
dee : 上 id 義 3s age, from) { 


congo1e.1og(thig.name + "で す 、 は じ め ま し て 『")』 
congo1e.1og( "年 齢 は " + age + ! 歳 で す ")』 
congo1e.1og( "出身 地 は " + from + "で す 『)』 


) 
) : 


var ob]2 = { 


} 


ob] 1 .greet .ca11 (ob]2,/ 6/ 


name : "ユリ 





また 、call メ ソ ッ ド と よく 似 た appIy メ ソ ッ ド も あり ます 。 使 い 方 は ほとん 
ど 同じ で す が 、apply メソ ッ ド は 第 2 引数 以降 を 配列 形式 に し て 渡し ます 。 





| 害 表 反応 | 1 上 RI UST : LE 
し し まま LE まま 間 し まい た きき 者 義員) ます | 
し EL は EL LE まま で すす の EE 『】 
「 ボ WNWmhmnWWm で WMNmw ぜ も < \ キ W)、 YY rv で 


リス ト フ 7.5 apply メソ ッ ド の 利用 


Var OD]1] = 
name: "よし お "。/ 
greet: funotion(age, from) { 
Congole.1od(thig.name + "で す 、 は じ め ま し て 『)』 
console.1oq( "年 齢 は " + age + " 歳 で す "): 
conso1e.1oq( "出身 地 は " + from + "で す 『) 


) 
) 7 
var ob]2 = { 
name: "ユリ 了 " 
}) 
Y& ゞ で Da エア am = 【6。 アメ リカ 91』 
ob] 1 .9dreet . app1y (ob] 2 , param) 











04 0 0 MA 0 0 人 00220 ARE 
出身 地 は アメ リカ で す WW o 0 UP 





重 905009U 
P オブ ジェ クト は 内 部 に プロ バテ ィ と メソ ッ ド を 持つ 。 


関数 を 値 と し て 持つ 要素 を メソ ッ ド と 呼ぶ 。 
メソッド は call や apply メ ソ ッ ド に よっ て 貸し 借り が で きる 。 


_E esidieer csir 凍 | 


⑳ 1 以下 の オブ ジェ クト が 持つ メソ ッ ド を 実行 する に は 、 ど の よう か 命令 を 
記述 し ます か ? 


Yar ob] = { 
x: funotion () { conso1e.1og ("こんにちは ") : } 
) : 


⑳⑳ メソ ッ ド の 中 で 記述 する と 、 オ ブ ジ ェクト 自身 を 表わす キー ワー ド は な 
ん で すか ? 





ご 解答 は 巻末 に 掲載 
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ご 介 組み 込み オブ ジェ クト 





組み 込み オブ ジェ クト と は 


関数 と 同じ く オ ブ ジ ェクト の 場合 も 、]avaScript が あら か じ め 用 意 し て 
いる オブ ジェ クト が あり ます 。 これ を 組み 込み オブ ジェ クト と 呼び ます 。 
]avaScript に は 、 き さま ざま な 種類 の 組み 込み オブ ジェ クト が あり ます 。 









表 7.1 組み 込み オブ ジェ クト 一 覧 
オプ ジェ クト 名 説明 


Object 。 | すべ て の オブ ジェ クト の 元 と な る オブ ジェ クト 


Date | 日 時 近作 機能 を 持つ オプ ジェ クト 。 。 


計算 機能 を 持つ オブ ジェ クト 0 失 


_ | 配列 操作 機能 を 持つ オブ ジェ クト 


「String | 文字 和 押 作 機能 を 持つ オプ ジェ クト 。 


以降 で は 、 こ の 中 で も 特に よく 使わ れる オプ ジェ クト に つい て 、 利 用 方 法 の 
一 例 を 見 て いき まし ょ う (ここ で 取り 上 げた も の 以外 に も さま ざま な 使い 方 が 
あり ます )。 


9 


波 か っ こ || で 初期 化し た オプ ジェ クト は 、Object オ ブ ジ ェクト に な り ま 
す 。 よ っ て 、 連 想 配列 は 、Object オ ブ プ ジ ェ クト で す 。 す べ て の オブジェ クト 
は 、 こ の Object オ プ ジ ェ クト を 元 に し て 作ら れ て いま す 。Object オ ブ プ ジ ェクト 
が 持つ プロ パテ ィ と メソ ッ ド は すべ て の オブ ジェ クト で 利用 する こと が 可能 で 
す 。 







Object オ ブ ジ ェクト 
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Cp 


すべ て の オブ ジェ クト は Object を 拡張 し て 作ら れ て いる 


くめ Date オ ブ ジ ェクト 


Date オ ブ ジ ェクト は 、 日 時 を ミリ 秒 形式 の デー タ と し て 持つ オプ ジェ クト 
で す 。 日付 同士 の 比較 を 行なう 場合 な ど に 利用 レ し ます 。Date オ プ ジ ェ クト に 
は 、 表 7.2 の メソ ッ ド が あり ます 。 








表 フ 7. の 6 Date オ ブ ジ ェクト の メソ ッ ド 











メソ ゾ ッ ド 名 説明 


オブ ジェ クト が 持つ 日 時 デー タ の 「 年 」 を 返す 


オブ ジェ クト が 持つ 日 時 デー タ の 「 月 」 を 返す 。Date オブ ジェ クト は 、 月 の み 
getMonth 


0 ~ 11 まで の 数 値 で 管理 され て いる た め 、 5oIMonth My ド で 取得 し た 値 

| を 実際 の 月 に 直す に は 1 加算 する 必要 が ある 人 NM 
オブ ジェ クト が 持つ 日 時 デー タ の 「 日 」 を 返す 
| オブ ジェ クト が 持つ 日 時 デー タ の 「 時 間 」 を 返す 


オブ ジェ クト が 持つ 日 時 デー タ の 「 分 」 を 返す 6 記 


getSeconds ' オブ ジェ ク ト が 持つ 日 時 デー タ の 「 秒 」 を 返す 






















Date オブ ジェ クト の 使い 方 は 次 の と お り で す 。 





[Date オブ ジェ クト の 生成 


yar オブ ジェ クト 名 = new Date 人 (年 , 月 , 日 ): 






引数 で 指定 され た 年 月 日 を 持つ オブ ジェ クト が 生成 され ます 。 月 に は 実際 
の 月 か ら -1 し た 値 を 指定 し て くだ さい 。 引 数 を 省略 し た 場合 は 、 現 在 の 日 時 を 
デー タ と し て 持ち ます 。 こ こ で いう 現在 の 日 時 と は 、 記 述 し た TavaScript が 動 
作 す る パソ コン (クラ イア ント PC) の 日 時 の こと で す 。 

年 月 日 は 、 表 7.3 の メソ ッ ド を 使っ て 取得 で きま す 。 


WS [Date オブ ジェ クト の メソ ッ ド の 記述 


Date オ ブ ジ ェクト . メ ソ ッ ド 名 () 





リス ト 7.6 Date オ ブ ジ ェクト の 利用 


Yar oday = new Date() : 

conso1e.1og(" 今日 は " + 
today.qetFu11Year() + "年 ! + 
(today.qetMonth() + 1) + "月 " + 
today.getDate() + "日 で す 。『)』 





WIUTT xx209 JRMKIYODDACUUUMM 0 あ MT K MD0UMYM St IMUU * 1 WAY ド ド Mu リ rt XS AWDOL U PV NO 7 。 り 0 1 『 が 4 

0 し ! DOMAM UIVnUDK か dy f 0 0 MOUMUURA WWriyPUUOMUUUT 生 WI 1 W/ WALKIMVVY リ UM NE DO UM My) を 
OTNSNINOUIIIUANW MOMA WMIUUWD NDLUUMNODAOMYUAMI Mu MI JNI IA JST MM Nr 本 ) OUOUAMMUAUNy AD UM NTSSWWuO1) 9 WIMWWMWN UrleWMMY 和 AtNYNMTNU UTA 

し ま 。 ( き AN 札 が WMU DUWUY ju AOM 人 Mu リリ: f り (MY UI 4」 才 ルリ ょ At AUOMMHyL し 0 あり 0 NUM 

vi4 【 - 【 軸 し ht WMA ATMW PT WU し | ! 1 生 A ナ 1( 7 UI AM ぶ 2 りん 生 NIDIWAADUOU、ML。 

3 】 MM cw 結党 ら の OU ON RS TRACRTNNYUAYKTTUUSE さ SE に と 2 放電 削い 7 いい OCSATTYUUDAT VO いと と と と まい 6 才 KU RET 
所 0wy 本 の 1 7 US US VMDIUUUS20T する 00 で 基く SS GEOWLGba UM 商 AU AP UN MS 人 7 008 MO 0 電 OR は 1 の Ss rm 0 3 
【 MNO Ivy ETURADATTN MY MAY イル JNN TUUIW7 VNUNOUMAGSUCKCAovk EAR ALAN PPYJPuULS 1 に の だ TA sn nM て 0 ガメ に ) PTYD OM 

OMUNACDNKA7WOOMKC WU WANADODUODINWWWN ADAMSAUIUYTNL DUWWK 0 PIANOILOWUTRDIDOTUU 二 OO CM 0 沿 党 人 CT MD、 AWCAION 





%) Math オ ブ ジ ェクト 


Math オ ブ ジ ェクト は 、 さ ま ざ ま な 計算 機能 を 提供 する オプ ジェ クト で す 。 
表 7.3 の メソ ッ ド が あり ます 。 


表 7.3 Math オ ブ ジ ェクト の メソ ッ ド 
メソ ッ ド 名 記 明 


ceil | 小数 点 以下 の 値 を 切り 上 げた 結果 を 返す 


| 小 聞 放 以 の 値 を 切り 捨て た 結果 を 返す 


小数 点 以下 の 値 を 四捨五入 し た 結果 を 返す NNE か 


Math オ プ ジ ェ クト の メソ ッ ド は 、 オ プ ブ ジ ェクト を 生成 し な く て も 利用 で きま 


ea Math オ ブ ジ ェクト の メソ ッ ド 


Math. メ ソ ッ ド 名 人 (数値) 
























175 








176 


7 wi すっ 


リス ト 7.7 Math オ ブ ジ ェクト の 利用 


conso1e.1og(Math .cei1(1.5) ) : / / 切り 上 げ 
congo1e.1og(Math.E1oor(1.5)):  // 切り 捨 て 
congo1e.1og(Math .round(1.5)):  // 四捨五入 





⑯ Array ォ フ ジェ ク ト 


Array オブ ジェ クト は 、 通 常 の 配列 の こと で 、 配 列 操作 に 関す る 機能 を 持っ 
て いま す 。 角 か っ こ 上 で 初期 化し た オプ ジェ クト は 、Array オ プ ジ ェ クト と な 
り ま す 。 

主 な プロ パテ ィ と メソ ッ ド に つい て 見 て いき まし ょ う 。 








避 length プロ バ パティ 
配列 の 要素 数 を 表わし ます 。 利 用 例 は 第 4 章 (99 ペ ー ジ ) を 参照 し て くだ さい 。 


K push メ ソ ッ ド 

配列 に 要素 を 追加 し ます 。 第 4 章 で は イン デック ス を 指定 し て 要素 を 追加 し 
まし た が 、push メ ソ ッ ド を 利用 する と 配列 の 未 尾 に 要素 が 追加 され 、 自 動 的 
に イン デック ス が 割り 振ら れ ま す 。 一 度 に 複数 の 要素 を 追加 する こと も 可能 で 


Ss DuSh メ ソ ッ ド | 
配列 名 .pugh (要素 1, 要素 2 ・・・), 





リス ト フ 7.8 push メ ソ ッ ド の 利用 


var number8 = [10, 20, 301: 
number8 .pugh(40, 50): 
congo1e.1oqd (numDer8) 








KK join メソッド 
配列 の 各 要 素 を 連結 し て 1 つの 文字 列 を 生成 し ます 。 要素 間 の 区 切り 文字 を 
引数 で 指定 し ます 。 


る JOI ロ メソ ッ ド 
0 Join ("区 切り 文字 ") 』 





リス ト フ 7.9 join メ ソ ッ ド の 利用 


Yar numDber8 = [10, 20, 30, 40, 501』 
Var Str = number8。]oin(" "):  // 半角 スペ ー ス を 区 切り 文字 と し て 要素 を 連結 


congo1e.1oq (st 上 と ) : 


T0Z20/0 40 50 ン 


「 半 


10 20 30 40 50' 


実行 イメ ー ジ 








避 reverse メ ソ ッ ド 
配列 の 要素 を 逆順 に 入れ 茜 え ます 。 


STGVGTSB メゾ ソ ッ ド 


配列 名 - と eVer8e ( ) 
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si 


リス ト フ 7 ア .10 reverse メ ソ ッ ド の 利用 


ya と number8 = [10, 20, 30, 40, 501 
number8 . エ GeVer8e(): 
cong8o1e. 1oqd (numDer8) : 





避 sort メソッド 
配列 の 要素 を アル ファ ベッ ト 順 に 並べ 替え ます 。 


SO 人 て メソ ッ ド 
配列 名 .gort() 






リス ト フ 7.1 1 sort メ ソ ッ ド の 利用 


yar wordg8 = 【["one", "WO" 。 "上 hree",。 "EoOur" 。 "F1VeG"] 
wOrQ8S 。 8O エ キ () 
congo1e.1oq (word8) : 





20 Strin 互 オブ ジェ クト 


スト リン グ 


String オ ブ ジ ェクト は 、 文 字 列 の 操作 機能 を 提供 する オブ ジェ クト で す 。 
ダブ ルク ォ ー ト や シン グル クォート で 囲 ん だ 文字 列 は 、String オ ブ プ ジ ェ クト の 
メソ ッ ド を 利用 で きま す 。 

主 な メソ ッ ド に つい て 見 て いき まし ょ う 。 








避 index0f メ ソ ッ ド 、slice メソッド 
indexOf メ ソ ッ ド は 、 指 定 し た 文字 列 が 何 文 字 目 に 出現 する か を 調べ ます 。 
先頭 文字 は 0 番目 と し て 数 えま す 。 





se る IndexXOUf メ ソ ッ ド 


文字 列 .indexOE ("検索 文字 列 『) 
検索 文字 列 の 出現 位置 





sliice メ ソ ッ ド は 、 文字 列 の 中 か ら 一 部 を 抜き 出し ます 。 抜き 出す 文字 列 の 開 
始 位 置 と 終了 位置 を 引数 で 指定 し ます 。 終了 位 置 は 、 実 際 に 抜き 出す 位置 より 
も 1 大 きい 値 を 指定 し ます 。 終了 位置 を 省略 する と 一 番 最後 の 文字 まで を 抜き 
出し ます 。 


se る SIICB メ ゾ ソ ッ ド 
文字 列 .g11ce (開始 位置 , 終了 位置 ) , 





indexOf メ ソ ッ ド と slice メ ソ ッ ド を 組み 合わ せ て 使う と 、 文 字 列 の 中 か ら 指 7 
定 部 分 だ け 抜 き 出 すこ と が で きま す 。 ピ 


リス ト 7/.18 index0f メ ソ ッ ド と slice メ ソ ッ ド 


Yar Company = "アシ アル 株 式 会 社 "』 

Var index = Company.1ndexOE ("株 式 会 社 ") 
Yar name = COmpany.811toce(0, 1ndex) 
conso1e.1oq (name) 





リス ト 7.12 で は 、 会 社名 か ら ' 株 式 会 社 " よ り も 前 の 名 前 だ け を 抜き 出し て い 
ます 。 ま ず 、indexOf メ ソ ッ ド で ' 株 式 会 社 " と いう 文字 列 が 出現 する 位置 を 詩 
べ て いま す 。 先頭 文字 を 0 番目 と する と 、4 番 目 に 出現 する と いう 結果 が 返さ 
れ ま す 。 次 に slice メ ソ ッ ド で 開始 位置 を 0、 終 了 位 置 を 4 と し て 文字 列 を 抜き 
出し て いま す 。 結果 と し て 先頭 か ら ' 株 式 会 社 " の 直前 まで の 文字 列 が 得 ら れ ま 
す 。 
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ン Jiw ぴ ッ 6 ・ WNW ギ YNW ま ポリ WNWY ボ WMWNIWNTNMTW ャ 上 du 
w _ 
か. 間 :n、 の まま he が .NY W 』 - SRI _ _ _ 


⑩ indexOf で "株 式 会 社 "の 開始 位置 を 取得 
012 3 6/ 
"アシ アル 株 区 会 社 " 
の slice で 0ー~ 4 番目 の 直前 まで を 抜き 出す 


01231456/ 
"| アシ アル 株 式 会 社 


実行 イメ ー ジ 


split メソ ッ ド 

指定 し た 区 切り 文字 で 文字 列 を 分 割 し 、 配 列 に 変換 し た 結果 を 返し ます 。 配 
列 の 最大 要素 数 を 引数 で 指定 で きま す 。 要 素数 の 上 限 が 必要 な い 場 合 は 第 2 引 
数 を 省略 し ます 。 Array オブ ジェ クト の join メ ソ ッ ド と 送 の 動き を する メソ ッ 
ド で す 。 


WS SDIit メ ソ ッ ド 
文字 列 . gp11t ("区 切り 文字 ", 配列 の 最大 要素 数 ) : 


分 解 され た 文字 列 が 代入 され た 配列 





リス ト 7.13 split メ ソ ッ ド の 利用 


Yar me8s8ade = "he11o my dear friend": 
var wordS = me88aqe.8p11t(" "): // 半角 スペ ー ス を 区 切り 文字 と し て 文字 列 を 分 害 
con8o1e.1od (word8) : 





match メ ソ ッ ド 
文字 列 の 中 か ら 正 規 表現 と 一 致す る 部 分 を 見 つけ 出し 、 戻 り 値 と し て 返し ま 


sa match メソッド 
文字 列 .match (正規 表現 ) ヵ 
ー 致 部 分 が 代入 され た 配列 





match メ ソ ッ ド と 次 の replace メ ソ ッ ド の 利用 例 は 次 節 で 紹介 し ます 。 


KK replace メソッド 
文字 列 の 中 か ら 正 規 表現 と 一 致す る 部 分 を 見 つけ 出し 、 指 定 し た 文字 列 に 革 
さき 換え ます 。 


reDlacBe メソッド 


文字 列 .rep1ace (正規 表現 , 『 置 換 文字 列 『) 
置換 後 の 全 体 文 字 列 


p 連想 配列 と 呼ん で いた も の は 、 実 は オブ ジェ クト と いう デー タ 
型 で ある 。 


了 配列 や 文字 列 も オブ ジェ クト の 一 種 で 、 あ ら か じ め 便 利 な メ 
ソ ッ ド が 用 意 さ ご れ て いる 。 


_I Hetsigdiee si 重 て 


Q⑳ 1 配列 は な ん と いう 種類 の オブ ジェ クト で すか ? 
Q⑩2 連想 配 列 は な ん と いう 種類 の オブ ジェ クト で すか ? 





ご 解答 は 巻末 に 掲載 





正規 表現 と は 


最後 に 、String オ プ ジ ェ クト と 関係 の 深い 正規 表現 と いう 手法 を 取り 上 げ ま 
す 。 

一 般 的 な Web サイ ト で は 、 個 人 情報 な どの 入力 フォ ー ム に 対し て 正しい 形式 
で 入力 され て いる か どう か を チェ ッ ク す る 処理 が 追加 され て いま す 。 








隊 っ G 8 homeahoekhe.comvseryyreglet con7/SEHS0001 ーーーーーーーーーーーーーーーーー ーーーーーーーーー…… 
(SEV . の で の の で し あー 6 


邊 し い 画 像 の) 文字 を 入力 し て い を が 合 廣 も 画 僧 の 文字 が 違う と いう メッ セー ジ が 表示 され る W は 、 お 手 散 で す が こ ち | 
ら を ご 確認 くだ さい 。 | 





E メ ー ル est@shoesha co p こ メー ル ア ド レ 
ーー 806 
AA ーー | 10 放 字 内 


本 上 刀 で 入力 し た パス ワー ド を 再 
確認 用 パスワード … 度 こ 入力 くだ さい 。 


この ニッ ク ネ ー ム は ご 利用 に な れ ま す 。 | 


mm ヤー ニア 





入力 チェ ッ ク の 例 


こう いっ た 入力 チェ ッ ク 処 理 に は 、 正 規 表現 が 用 いら れ て いま す 。 正規 表 現 
と は 、 文 字 列 の パタ ー ン を 特定 する た め の 手 法 の こと で す 。 た と えば 、 電 話 番 
号 の 場合 、 利 用 で きる 文字 は 数 字 と ハイ フン の み で 、 先 頭 は 0、 市 外 局 番 と 市 
内 局番 は 1 一 4 桁 、 加 入 者 番号 は 4 桁 固定 、 と いう ルー ル が あり ます 。 こ の ルー 
ル に 沿っ て いる か どう か を 、 入 力 さ れ た 文字 列 と 正規 表現 を 照ら し 合わ せる こ 
と で チュ ッ ク で さき る の で すず 。 
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正規 表現 で 記述 し た 電話 番号 の ルー ル 
/^o to -91 14)-? [0-91(1,4)-?【0-91(4)9/ | 


NN 03-0000-0000 we の 
0300000000 
03-0000-AAAA SO 


正規 表現 と 電話 番号 を 照合 











%⑳) 正規 表現 の 書き 方 


で は 正規 表現 の 具体 的 な 記述 方 法 を 見 て いき まし ょ う 。 


上 規 表現 
/ パ ター ン / オ プシ ョ ン 


数 字 が 4 桁 、 先 頭 が アル ファ ベッ ト な どの ルー ル の 形式 を パタ ー ン と 呼び ま 
す 。 パ ター ン と チェ ッ ク 対 象 の 文字 列 を 照合 する こと で 、 任 意 の 形式 に 浴 っ て 
いる か どう か を 調べ ます 。 パ ター ン 内 で は 「 直 前 の 文字 が 何 文字 分 続く か 」 を 
表現 する 繰り 返し 文字 を 記述 で きま す 。 ま た 、 オ プシ ョ ン を 付け て チェ ッ ク 方 
法 を 細か く 指 定 す る こと が で きま す 。 
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説明 


囲ま れ た 中 の いずれ か 一 文字 に 一 致す る 


[ ] の 中 に 記述 し た 場合 、 文 字 の 範囲 を 表わす 


文字 列 の 先頭 を 意味 する 。[ ] の 先頭 に 記述 し た 場合 は 否定 の 意味 に な る 
文字 列 の 末尾 を 意味 する 0 : 


改行 以外 の 一 文字 と 一 致す る " 
複数 の 文字 列 の うち いずれ か と 一 致す る 


パタ ー ン を グル ー プ 化す る 。 グ ルー プ 化 する と グル ー プ 全体 に 対し て 繰り 返し 
文字 を 適用 で きる 


表 7.5 繰り 返し 文字 一 覧 
文字 





説明 


直前 の 文字 が n 文字 以上 連続 する 箇所 と 一 致す る 
Inml | 直前 の 文字 が 文字 以 上 、m 文字 以下 の 範囲 で 連続 する 箇所 















と 一 致す る 





表 フ 7.6 オプ ショ ン 一 覧 
"を っ 説明 


1 | 大 文字 と 小文字 を 区 別 せ ず に 照合 する 。 


パタ ー ン と 一 致す る 部 分 文字 列 が 複数 ある 場合 、 最 初 の 1 つ だ け で な くす べ て 
検索 する 。 


複数 行 に 渡る 文字 列 に 対し て 照合 を 行なう 場合 に 指定 する 。 
^ は 各行 の 先頭 に 、$ は 各行 の 末尾 に 一 致す る よう に な る 





K3 バタ ー ン の 記述 例 
パタ ー ン の 記述 例え を いく つか 紹介 し ます 。 


バタ ー ン 1 文字 列 中 に abc が 含ま れ て いる か どう か を チェ ッ ク す る 


/abc/ 





パタ ー ン 2 まぁ 文字 列 中 に a ま た は b ま た は c が 含ま れ て いる か どう か を 
チェ ッ ク す る 


/ [abc] / 


バタ ー ン 3 文字 列 中 に aー z、A 一 Z まで の いずれ か の 文字 が 含ま れ て い 
る か どう か を チェ ッ ク す る 


/ [a- zA-Z] / 


バターン 4 文字 列 中 に アル ファ ベッ ト が 含ま れ て いな いこ と を チェ ッ ク す 
る 


/[^a-zA-Z] / 





パ バター ン 5 文字 列 中 に abc また は xyz が 含ま れ て いる か どう か を チェ ッ ク 
する 


/abclxyz/ 


これ ら を 組み 合わ せ て 電話 番号 を チェ ッ ク す る 正規 表現 を 記述 し て み ま し ょ 
う 。 電 話 番号 か 調べ る に は 、 次 の ルー ル に の っ と っ て いる か どう か を チェ ッ ク 
し 義 守 。 


@ 利用 で きる 文字 は 数 字 と ハイ フン の み 
@ 先頭 は 0 で 始ま る 

@ 市 外 局 番 は 1 ~ 4 桁 

@ 市 内 局番 は 1 一 4 桁 

@ 加入 者 番号 は 4 桁 

@ ハイ フン の 有無 は 問わ な い 
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目 ォ 7 。 オラ ジェ 2 


これ ら を すべ て 正規 表現 で 記述 し た も の が 以下 で す 。 


層 電 話 番号 チェ ッ ク の 正規 表現 
"0[0-91 {1,4)-?[0-9] {1,4)-?[0-9]1 {4)3/ 


%9) 正規 表現 の 利用 


それ で は 、 正 規 表現 を 利用 し て String オ ブ ジ ェクト の match メ ソ ッ ド と 
replace メ ソ ッ ド を 使っ て み ま し ょ う 。 
まず は 正規 表現 と match メソ ッ ド に よる 文字 列 の 抽出 例 で す 。 








リス ト フ 7 ア .14 match メ ゾ ッ ド の 利用 


var date = "2013 年 3 月 31 日 " 』 
Var reSu]t = date.matoh(/[0-9]+/q) : 
conso1e.1od す (regu1]) 』 





リス ト 7.14 で は 、 日 付 を 表わす 文字 列 の 中 か ら 「1 文 字 以 上 連続 し た 数 字 」 
と いう パタ ー ン に 一 致す る 部 分 を 探し て いま す 。 オ プシ ョ ン と し て g が 指定 さ 
れ て いる の で 、 一 致す る 部 分 が 複数 あれ ば すべ て 取得 し ます 。 結果 、 数 字 の 部 
分 だ けが 抜き 出さ れ て 要素 3 つ 分 の 配列 と な っ て 返さ れ ま す 。 


[0-9]+ に マッ チ 
"2013 年 3 月 31 日 


実行 イメ ー ジ 


続い て 、 正 規 表現 と replace メソッド に よる 置換 の 例 を 見 て み ま し ょ う 。 





リス ト フ 7.15 replace メソッド の 利用 


Var meS8ade = "This 18 a Den"』 
Yar reSu]t = megsgsade.replace(/18/ す , "at 上"): 
congo1e.1od す (reSu1 七 ) : 





リス ト 7.15 で は 、"This is a pen "と いう 文字 列 の 中 か ら isS と いう 文字 列 に 一 
致す る 部 分 を 探し 、"at' に 置き 換え て いま す 。 オ プシ ョ ン に g が 付い て いる の 
で 、 一 致す る 部 分 すべ て に 対し て 革 換 が 行なわ れ ま す 。 


IS に マッ チ 
「 This is a pen" 


IS 一 at に 置換 





"That at a Den" 


実行 イメ ー ジ 


p Web サ イト の 入力 チェ ッ ク は 正規 表現 を 使っ て 行なう 。 
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散 人 いす 季 と MAtAb 和 な か yy て か の の も vivyn rtm 人 6 の い か YWW 和 ひ も aYvrOeieryW 0 もの 人 か な を kbtPWy 1 し 

お てい かり の や w か WIYYwNANWTWW いも WW も も しい WWWWtyh 人 か WWA yy eewre の 人 ず W い it かみ 信 か WM WO 夫 き キ 全 ネイ WP 

KBW SYSY 人 CZ VN2AVYYAAMVTAT yy いか AYAYY NVNNNWWYN オ ルル WFPVWAWNMPNWAMYm き Fi 」 

1 EE お AALE HI LIESIJLEI II あ DLAUMRNE ま MELEELALAJUUAUAULIIAEMLI LEIMILRAUMLSASJAMIMMELSMRAMMLMIuLIMSUJLSJN お た まし ( ま 」 wW ッ UE IM 
KILLULLRAMALSAMSMI2MMUUNMMJULMMMCLNDA2MMALUMALAARU2LUMLAAAISMMISMMUSLAS2UILAUUIMMLUAMMMML2MSJLANILILIUIMNL0 


sa の ユリ た | モデ ヤル 


9 1 空 杉 A と B を 埋め 、item ら が 持つ calcTax メ ソ ッ ド を 、item1 の メ 
ゾ ソ ッ ド で ある か の よう に 呼び 出す スク リプ ト を 完成 させ て くだ さい 。 


var item1 = { 
price: 1000 


)) 
var item2 = { 
Price: 2000。, 
ca1cTax: Eunotion() { 
COon8ole.1od (Eh1g.Dr1CG * 0.05)』 
) 


} 7 
| A |.ca1cTrax.ca11(| B |): 


⑳2⑳ Qi の スク リプ ト が 正しく 実行 され る と 、 ど の よう な 結果 が 表示 され ます 
か ? 

⑳③ 以下 の スク リプ ト を 実行 し た 結果 、array と result が 同じ 内 容 の 配列 を 
持つ よう に し た いと 考え て いま す 。 空欄 を 埋め 、 ス クリ プ ト を 完成 させ 
て くだ さい 。 


Ya a 了 エエ aV = 0AW_ >: 月 WCW] * 
Va と 8 上 r = array。]otn("/『") 


var regu1t = str。| |("/"): 


⑳⑩4 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


Var Str = "money monday month common"》 
Yar wordg8 = 8t 上 と.match ( /mon/) 
Console.1oqd (words . 1enqgth) 


QB 以下 の スク リブ ト を 実行 する と 、 ど の よう な 結果 が 表示 され ます か ? 


Var 8 上 エ = "ff 了 1day saturday Sunday リ " 
Yar reD = Str.rep1ace(/qday$/d, "F1ower") 
congso1e.1od (rep) 』 


っ 解答 は 巻末 に 掲載 





この 章 で 学ぶ こと 
イベ ント 駆動 型 モ デル 
イベ ント ハン ドラ の 種類 
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仁 な に か の きっ か け で 負 理 を 行なう 欠 


ボタ ン が クリ ッ ク さ れ た な ど 、 イベ ント は 、 発生 一 通知 一 作動 の 
Web ペ ー ジ 上 で 発生 し た 出来 事 を 順番 で 動作 し ます 。 
イベ ント と 呼び ます た と えば 、 ボタ ン を クリ ッ ク し て 
イベ ント が 発生 する と … 


(ブラ ウザ に ) イ ベン ト 発 生 が イベ ント に 連動 し た 処理 が 
通知 され て … 実行 され ます 


JavaScript で は 、 各 種 イ 
応じ て 処理 を 実行 で き 





前 攻 ま で は 、 ペ ー ジ を 開く と 即座 に JavaScript が 実行 され て いま し た 。 本章 
で は 、 ボ タン が クリ ッ ク さ れ た と き な ど 、 な ん ら か の イベ ント が 発生 し た タイ 
ミン グ で JavaScript を 実行 する 方 法 を 学び ます 。 








ント 駆動 型 モ デル 






イベ ント と は 


ペー ジ が 表示 され た 、 ボ タン が クリ ッ ク さ れ た など 、Web ペ ー ジ 上 で 発生 し 
た 出来 事 を イベ ント と 呼び ます 。 ま た 、 イ ベン ト が 発生 し た と き に 対応 する 処 
理 を 呼び 出す 仕組 み を イベ ント 駆動 型 モ デル と 呼び ます 。 

]avaScript は 、 イ ベン ト に 応じ た 処理 を 実行 する 、 イ ベン ト 駆 動 型 モデ ル の 
スク リプ ト 言 語 で す 。 そ れ ぞ れ の イベ ント と 任意 の 処理 を あら か じ め 関 連 付け 
て お く と 、 イ ベン ト ハ ンド ラ と 呼ば れる 機能 が イベ ント の 発生 を 検知 し 、 対 応 
する 処理 を 呼び 出し ます 。 
















コウ が オー ント 2 ント 0 ドコ 人大 の 処理 


の イベ ント が 発生 ② イ ベン ト ハ ンド ラ が 。 イベ ント に 関連 付け ら 
イベ ント の 発生 を 検知 ” れ た 処理 を 呼び 出す 


イベ ント 駆動 型 モ デル 


な イベ ント 


表 81 は 、 よ く 使 われ る イベ ント の 一 覧 で す 。 イ ベン ト ハ ンド ラ の 名 前 は 、 
「onm」 + イ ベン ト 名 と な り ま す 。 
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表 B.1 イベ ント 一 覧 
種類 発生 する タイ ミン グ イベ ント ハン ドラ 名 
1bad | ペー ジ が 表示 され た と き 
|cllck | ペー ジ 上 の 部 品 が クリ ッ ク さ れ た と き 。 |onclck 
ペー ジ 上 の 部 品 に マウ スカ ー ソ ル が 乗っ た と き 
mouseout ペー ジ 上 の 部 品 か ら マ ウス カー ソル が 外れ た と き 
ペー ジ 上 の 部 品 に フォ ー カ ス が 当たっ た と き 
ペー ジ 上 の 部 品 か ら フ ォ ー カ ス が 外れ た と き 。 |onblur 。 
セレ クト ボッ クス な どの 選択 肢 が 変更 され た と き 



















部 品 と は 、 第 2 童 で 触れ た と お り 、 テ キス ト ボ ックス や ボタ ン 、 セ レク ト 
ボッ クス 、 リ スト な ど 、Web ページ (フォ ー ム ) を 形作る HTML 要素 を 指 
し ます 。 





| HeTc7diee rccir 凍 | 


Q 1 以下 は イベ ント に 関す る 説明 で す 。 空 材 A と B を 適切 な 語 で 埋め て くだ 
さい 。 


・Web ペ ー ジ 上 で ボタ ン の クリ ッ ク な どの イベ ント が 起こ る と 、|_A_ | が イベ ント の 発生 
を 検知 し 、 関 連 付 けら れ た 任意 の 処理 を 呼び 出す 。 こ の よう な 仕組 み を | B | と 呼ぶ 。 





ご 解答 は 巻末 に 掲載 
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に 角 イベ ン ト の 使い 方 









click イ ベン ト 


イベ ント が 発生 し た タイ ミン グ で 処理 を 行なう に は 、Web ペ ー ジ と イベ ン 
ト (イベ ント ハン ドラ ) を 関連 付け る 必要 が あり ます 。 イ ベン ト ハ ンド ラ は 、 
HTML タ グ の 属性 で す 。 属性 値 の 部 分 に 、 イ ベン ト 発 生 時 に 実行 する 処理 
(JavaScript) を 記述 し ます 。 


< タグ 名 イベ ント ハン ドラ 名 = "JavaScript 上 に よる 処理 "></ タ グ 名 > 
HTML タグ の 属性 と し て イベ ント ハン ドラ を 記述 


よく 使う イベ ント の 1 つ に 、 ボ タン を クリ ッ ク し た と き に 発生 する click イベ 
ント が あり ます 。 こ の 利用 例 で 記述 方 法 え を お ぼ え まし ょ う 。 








リス ト 8.1 click イ ベン ト の 利用 


< !DOCTYPE htm1l > 
<html] lanqg="]a"> 
<head> 
<meta Char8e ヒ ="utfF-8 リ "> 
<t 上 ュ it 上]e>JavaSCr1pt の 練習 </ 上 1 上 1e> 


</head> 
くわ DOdY> 
<button onc1icks"a1lert(' こ ん に ち は !) j『> ク リッ ク </but 上 ton> 
</body> 
</htm1] > 














193 





We な の bike 年 ひ いっ 4 _ WM が WM NM WW WW 邊 WW まま かれ ッ EEH INITRIREUNULE まま WIWV を あお 条 還 6 が 』 0 か WW きす 條 すか る すず 幸 和 WWiWiW きき 曲 氷 町 必 本 や WINNYWWNh パ vV 8 末 W まり ー * ee あさ ルム の ww を Ja WW ネル ペ ボネ 
し も の 0 ん の アア iu _ 馴 。 。 「 挟 丘 . と Aa | っ ボ を 半 二 人 業 下 ま 」 に あ 
= MY 3 ま マデ f 重 ーー キキ 生み まま WNW NN SW WNW ま 3 まま WW N ず 和 ww 生還 まま WNW 才 還 NN 衝 条 き まま 困 還 まま きす MIW NNN き IN 邊 机 まま すま 9 0 6 *W WNW まれ \! ず で 地 W W W ま や 9 ず まま まま 胡 . まま , | 邊 . 生 お 。 ま 。 ポポ f や 3 ー *』 まま 用 ま 」] 系 や W お 『 ー し | 生 。 

CM MtEWTW プイ Ar れ ん か ん YY の 中 もの ツ が 作り な か か を 居 か We 信司 か 人 Yivh か の ル い 衝 ルル か か 0 か か か 分 0 い Oh が 0 We か か か 0 ゆ か ルル 人 性 み rivt か か PTW 人 WW DUTY WM は の が 

ALJM 人 by か w 生ま ッ 生 まま ポ ま ま w る | 丘 .. 二 ま 。 寿 。 

あま ャ % まず 3 IW 4 き 知 ま ず NM WW WW ます MM ま ' ま ず 二 ま ま ま 日 』 ご AN ネネ W WAN NN まま ネネ き 二 5 まま NM 末 マサ 挟 邊 朋 ま JE NE まま. まま W ポ WM R W コ 「 まま し 

2 RA 


画 実行 結果 ボタ ンク リッ ク 後 
-- 本 補 


6 に 知 








SW 


リス ト 8.1 で は 、<button> タグ に onclick 属 性 を 付与 し て いま す 。 こ の よう に 
処理 を 属性 値 と し て 指定 し て お く と 、 ボ タン が クリ ッ ク さ れ た タイ ミン グ で 実 
行 さ れ ま す 。 





リッ フク 
ホホ タン を 生還 

アー ' リル 4 導 に 

の H』 イベ ント 発生 





<button onoc1iok="a1ert (! こん に ち は ! ) ,『 
クリ ッ ク </but 上 ton> 









JavaScript の スク リプ ト が 
[ 実行 され る 


Click イベ ント の 実行 イメ ー ジ 


往 意 し な けれ ば な ら な い の は 、 


@ ダ ブル クォート で 囲ま れ た 中 (て ) に は ダブ ルク ォ ー ト を 記述 し な い 
@$ シ ング ルク オォ オート で 囲ま れ た 中 (ーー ) の 中 に は シン グル クォート を 記 
述 し な い 


と いう こと で す 。 も し リス ト 81 の 「 こ ん に ち は 」 と いう 文字 列 を ダブ ルク ォ ー 
ト で 囲ん だ 場合 、|「alert(|」 まで が onclick の 属性 値 と な り 、 以 降 の 命令 は 無効 な 
文字 列 と な っ て し まい ます 。 





<but 上 ton onc1iok="a1ert (! 


% “ > クリ ッ ク </button> 
ここ まで が 属性 値 無効 な 文字 列 
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外側 を ダブ ルク ォ ー ト に し た 場合 は 内 側 を シン グル クォート に する 、 と いっ 
た よう に 、 外 側 の 囲み 記号 と 内 側 の 囲み 記号 は 違う も の を 使う よう に し まし ょ 
う 。 

な お 、 こ の 例 は 1 行 だ け の 短い 処理 な の で 命令 文 を 属性 値 に 直接 記述 し まし 
た が 、 ほ と ん どの 場合 、 複 数 行 に 渡る 長い 処理 を 実行 する こと が 多い は ず で 
す 。 そ うい っ た 場合 は 、 関 数 を 呼び 出す 記述 に し ます 。 次 は リス ト 8.1 の 変更 
例 で す 。 


リス ト 8.1A イベ ント 発生 時 に 行なう 処理 を まとめ た 関数 を イベ ント ハン ドラ に 指定 


< !DOCTYPE htm1l > 
<htm1 1and="]a"> 
<head> 
<meta Char8e ヒ ="u 人 上 壮 -8『> 
< 上 1 上 6>JaVaScCr1pt 上 の 練習 </ 上 1 上 1e> 
< く 8C エ 1p キ > ! 
funoction sayHe11o() { 
a1ert ("こん に ち は 『") : 
) | クリ ッ ク 時 に 呼び 出さ れる | 
</ gcCr1p セ > 
</head> 6 
<body> 
<button onc1iok="sayHe11o() :"> ク リッ ク </Dut 上 On> 
</body> 
</htm1] > 


ここ で は 例 と し て click イ ベン ト を 取り 上 げ ま し た が 、 他 に も よく 使う イベ ン 
ト が あり ます 。 以降 で は 、Web ア プリ ケー ショ ン で 特に 利用 頻度 の 高い イベ ン 
ト に つい て 見 て いき まし ょ う 。 


9 


Web ペ ー ジ が 表示 きれ た タイ ミン グ で 実行 され ます 。 一 般 的 に <body> 要素 
の 属性 と し て 指定 し ます 。 


load イベ ント 
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リス ト 8.2 load イ ベン ト の 利用 


< !DOCTYPE htm1> 
<html 1anqg="]a"> 
<head> 
<meta Charset 上 = リ "utfF-8 リ "> 
< モ 上 1 上 1]6G>JaVaScr1p 上 の 練習 </ 上 1t1e> 





一 見 、 前 草 ま で の よう に イベ ント を 設定 せ ず に 処理 を 記述 し た と き と 同 
じ タ イミ ング で 動い て いる よう に 見 えま す が 、 実 際 は わずか に 異な り ま す 。 
<script> 要素 内 や .js ファ イル 内 に 直接 記述 し た 処理 は 、<script> 要素 以降 の 
HTML タ グ が 読み 込ま れる 前 に 実行 され ます 。 そ れ に 対し て 、load イベ ント に 
関連 付け た 処理 は すべ て の HTML タグ の 読み 込み が 終了 し た 後 で 実行 され ま 
す 。 こ の 人 違い は 第 10 章 の DOM (Document Object Model) を 利用 する 際 に 重 
要 な ポイ ント と な り ま す 。 


一 〈Script〉 要素 内 に 記述 し た 場合 の 実行 タイ ミン グ 


<!DOCTYPE htm1] > 
<htm1 1ang="]a"> 
<head> " 「 
<meta Charset 上 ="utF-8『> 
< 上 1 上 1e>JavaSor1ipt の 練習 < / モ 1t 上 1e> 
く <8C エ 1p セ > 






⑩ タグ の 読み 込み を 中 断 









く / 8C エ 1p セ 上 > 】 人 「 人 0 
</head> ! 900 “ 和 
<body on1oad="conao1e.1og(] こん に ち は ' ) "> | 
</body> 「 ] 「 

</htm1 > 












園 Ioad イベ ント の 実行 タイ ミン グ 


< !DOCTYPE htm1l ユ > 
<htm1 1ang="]a"> 
<head> 
<meta Char8e ヒ ="u 革 -8『"> 
<t 上 it 上 1e>JavaScrip 上 の 練習 < / 上 1t1e> 
</head> 
<body on1oad="conso1e.1og( ! 









</body> タグ を すべ て 読み 込む 
</htm1 > 


2 mouSeOoVver / ImOuSBOut ト イベント 








ペー ジ 上 の 部 品 に マウ スカ ー ソ ル が 乗っ た と き と 、 マ ウス カー ソル が 外れ た 
と き に 実行 され ます 。 画像 に マウ スカ ー ソ ル が 乗っ た ら 別 の 画像 を 表示 する な 
どの 用 途 で 利用 きれ ます 。 


リス ト 8.3 mouseover / mouseout イ ベン ト の 利用 


< !DOCTYPE html > 
<htm] 1anqd="]a"> 

<head> 

<meta CharSet="utfF-8 リ "> 

< 上 1 上 ]e>JavaSCr1pt 上 の 練習 </ 上 1t1e> 

</head> 

< くわ DOdY> 

<1mg 8rc="1imade8/fFrog1 .]pd" onmougeover="console.1og(' カ ー 則 
ソル が 乗っ て いま す ' ) j" onmougeout="conso1e.1og( ' カー ソル が 外れ まし た 『 ) "> 
</body> 
</htm1] > 





を ) @ ) fle://C:/wort7ltst8_3.html 


画像 の 上 に マウ ス 画像 の 外 に マウ ス 
カー ソル を 移動 カー ソル を 移動 


本 Do… ーー 0… さ ざー で ーー  ・9 


% カー ソル が 外れ まし た MtB JJhti 
> 


品 =s へ ⑥ <top iframe> Y 訪 rerr wwrmmer Loss 呈 :3 Q ⑥ <iopfemer | rer wereeex Low 登 
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WW た の WWA WM wiWW で WM まま MYWJWMWWEWWWAMDTWNMMN 人 WWW や et か 村 人 mwWwW 才 洛 や 才 W キ すす W 症 W まず せ を WW 衝 還 たか す や TWA を W 征 事 W 基 導き し すれ dy. ゅ の の detctD ire AA WMA も を <Yh の か he ym つい か 
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99 focus / blur イ ベン ト 








ペー ジ 上 の 部 品 に フォ ー カ ス が 当たっ た と き と 、 フ ォ ー カ ス が 外れ た と き に 
実行 され ます 。 フ ォ ー カ ス と は 、 部 品 が 選択 され た 状態 の こと を 指し ます 。 テ 
キス ト ボ ックス に 入力 カー ソル が 現われ て いる 、 な ど が フォ ー カ ス を 得 て い る 
状態 で す 。 


リス ト 8.4 focus / blur イ ベン ト の 利用 


<!DOCTYPE html > 
<htm] 1]anqd="]a"> 
<head> 
<meta Char8e ヒ ="u 人 上 半 -8『"> 
< 上 1 上 1e>JaVaSCr1pt 上 の 練習 </ 上 1 上 1e> 
</head> 
<DOd> 
<1nput type="Eex 上 m onfocug="『con8ole.1od(' フ ォ ー カ ス を 取得 史 
し まし た ' ) j『" onb1ur="congo1e.1og(' フォー カス が 外れ まし た ) 》 "> 
</body> 
</htm1 > 


を 3 G fle:///C:/woriist8_4.htm を 3 で fle:///C:/worvlist8_4.html 。 


を クリ ッ ク ト 2 


er mew ⑨… の "の … さき で 
フォ ー カ ス を 取 科 し まし た 
フォ ー カ ス が 外れ まし た 





》 


中 添 へ Q <opframe> マ | Frrorr werwmes Leet 





Oonchange イベ ント 








セレ クト ボッ クス な どの 選択 項目 が 変更 され た 場合 に 実行 きれ ます 。 た と え 
ば 、 セ レク ト ボ ックス の 中 か ら 路 線 名 が 選択 され た ら 、 ペ ー ジ に 駅 名 の 一 覧 を 
表示 する 、 と いっ た 処理 を 行なう 場合 な ど に 利用 し ます 。 
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リス トコ.5 onchange イベ ント の 利用 


< !DOCTYPE html> 
<htm1] 1and="]a"> 
<head> 
<meta Char8e ヒ = "ut 上 FE-8 リ "> 
< 上 it]1e> JavaScrip 上 の 練習 < / 上 1 上 1e> 
</head> 
< くわ DOdY> 
<se1eot onochange="conso1e.1og( ' 項 目 が 変更 され まし た ! ) "> 
<option> り ん ご </option> 
<option> い ちご </op 上 1on> 
<option> み か ん </Op ヒ 1on> 
</se1ec 上 > 
</body> 
</html] > 





一 実行 結果 


| JavaScript の 百 い 
を  G | file:///C:/ 


ist8_5.html 


、 項目 が 変更 され まし た 1ist8 5.html:6 
> 


ee 


品 へ Q <iop frame> Y {) | grrors Warninss Lows 


Eat YE に 1 貴 … 


Q 1 onload イ ベン ト ハ ンド ラ は 、 一 般 的 に どの 要素 に 対し て 関連 付け ます 


か ? 
Q⑩2 部 品 か ら フ ォ ー カ ス が 外れ た タイ ミン グ で 発生 する イベ ント は な ん で す 
か ? 


つ 解 答 は 巻末 に 掲載 
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2 thisS キー ワー ド の 利用 


1 つの 関数 を 複数 の イベ ント か ら 呼 び 出す と き 、 呼 び 出さ れ た 関数 内 で どの 
部 品 か ら 発生 し た イベ ント な の か を 知り た い 場 合 が あり ます 。 そ の よう な と き 
に は 、this キー ワー ド を 利用 し ます 。 イ ベン ト ハ ンド ラ に 関連 付け た 処理 の 中 
で this キー ワー ド を 記述 し た 場合 、this は イベ ント ハン ドラ 属性 が 付け られ た 
HTML 有 要素 自身 を 表わし ます 。 





リス ト 8.6 イベ ント の 発生 元 を 調べ る 


< !DOCTYPE htm]] > 
<html 1anqd="]a"> 
<head> 
<meta Char8et= リ utfF-8 リ "> 
< 上 1 上 1]e>JaVa8c エ ip の 練習 < / 上 1 上 1e> 
く 8C エ 1p 上 > 
function cheock(e) { 
congo1e.1od(e.Ya1ue + "が クリ ッ ク さ れ ま し た ") 





< く / 8C エ 1D キ > 
</head> 
< くわ DOdY> 
<1nput type="button" va1ue=" ボ タン 1 onc1ick="check (thig) : "> 
<1nput type="Dbutton" value=" ボ タン 2 onoc1iock="check (thtg) : "> 
<1nput type="Dbutton" value=" ボ タン 3 onc1iock="ocheck (thig) : "> 
</body> 
</htm1 > 
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時 実行 結果 


| JavaScript の 練習 
を っ ご [file:///C:/work/list8_6.html 


mm ツン ンー ツー の ーー ンー ーーー ペー ツー ペペ マツ ツー アツ ーー ンー ペーーーーーーーー ツ ーー ニー ペペ ペー ペペ ツ ーー マー ツー ツン ペー ペー ツーーーーー ーー 


| ポタ ン 1 | 


ィ 


ポタ ン 2 が クリ ッ ク さ れ ま し た " 
> 


口 >= Q Q <lopframe>y @ 呈 | Errorz wernines Lows 





リス ト 86 で は 、 ま ず 各 部 品 の onclick 属 性 で check 関 数 を 呼び 出し 、 引 数 と 
し て this を 渡し て いま す 。 こ の と き 、this は イベ ント 発生 元 の 要素 、 仮 に [ボタ 
ン 2] が クリ ッ ク さ れ た 場合 は 以下 の <input> 要素 その も の を 表わし て いま す 。 


<1nput type="button『 value=" ボ タン 2 onc1tck="oCheok (thig) "> G 





check 関数 は 、this を 引数 と し て 受け 取り 、 変 数 e に 代 人 し て いま す 。 変数 e 
の 後ろ に 「. 属 性 名 」 と 続け る こと で イベ ント 発生 元 要素 の 各 属 性 値 を 得る こと 
が で きま す 。 
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WW WW YA 
Mi 


<!DOCTYPE html> 
<html] lanq="]a リ "> 
<head> 
<meta Char8et="ufF-8 リ "> 


< 上 1 上 1]e>JaVaScr1pt の 練習 < /t 上 1 上 1e> 


目 分 自身 の 情報 を 渡す 


く 8C エ 1 上 > ご ここ ュー ャ ニー ここ ャ ここ っ マ ここ = ュ や OPCPSGTWKtPMOIOTGWCXDACD4D0 


ャ 
Eunction check(e) { 
congole.1og(e. value + "が クリ ッ ク さ れ ま し た 『") 』 


) 


く / 8C エ 1p セ > 
</head> 


<DOd> 


<1input type="Dbutton『 value=" ボ タン 1 onc1ick="check( [bg]) ,"> 


<1nput type="Dbutton" va1ue=『 ボ タン 2 onc1ick="check( [hg] ) "> 


<1nput type="Dutton" va1ue=" ボ タン 3『 onc1iok="check( [thigs]) "> 
</body> 





</htm1 > 


イベ ント 処理 に お ける this キーワ ー ド は イベ ント の 発生 元 に 関 


する 情報 を 持つ 。 
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この 章 の 到達 度 チ ェ ッ ク 


Q 1 以下 の タグ で は 、 ペ ー ジ が 表示 され た タイ ミン グ で コン ソー ル に メッ 
セー ジ を 表示 する 処理 を 設定 し て いま す 。 空欄 を 埋め 、 処 理 を 完成 させ 
て くだ さい 。 


<body | |="consgo1e.1og('We1come! ) "> 


⑳ る ⑳ 以下 の タグ で は 、 テ キス ト ボ ックス か ら フ ォ ー カ ス が 外れ た タイ ミン グ 
で コン ソー ル に メッ セー ジ を 表示 する 処理 を 設定 し て いま す 。 空欄 を 埋 
め 、 処 理 を 完成 させ て くだ さい 。 


<input type="textm | |="congo1e.1og(' フ ォ ー カ ス が 外れ まし た !) : "> 


Q 以下 の タグ で は 、 セ レク ト ボ ックス の 選択 項目 が 変更 され た タイ ミン グ 
で コン ソー ル に メッ セー ジ を 表示 する 処理 を 設定 し て いま す 。 空欄 を 埋 
め 、 処 理 を 完成 させ て くだ さい 。 





<select | |="conso1e.1og('He11o' ) "> 


Q4 以下 の タグ で は 、 ボ タン が クリ ッ ク さ れ た タイ ミン グ で funo 関 数 を 呼 
び 出 し 、 引数 と し て 自分 自身 を 渡す 処理 を 設定 し て いま す 。 空欄 を 埋め 、 
処理 を 完成 させ て くだ さい 。 


<button onc1iock="EFunc(| |) :"> ボ タン </button> 


QB 変数 elm に は イベ ント 発生 元 の 要素 が 代入 され て いま す 。 要 素 の value 
属性 の 値 を 得る に は 、 空 欄 に な に が 入り ます か ? 


elm.| | 





ご 解答 は 巻末 に 掲載 
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ワウ 9 ザ オ ブ プ ジ ェ クト の 
種類 


タイ マー 機能 
ペー ジ 間 の 移動 
フォ ー ム 有 要素 の 取得 











@ ブラ ウザ オブ ジェ クト で 、Web ペー ジ を 操作 で きる 殺 


ブラ ウザ 上 の 情報 は 、 
すべ て オブジェ クト と し て 扱い ます 。 
これ ら の オブ ジェ クト を 総称 し て 
ブラ ウザ オブ ジェ クト と 呼び ます 


すべ て の プラ ウザ オプ ジェ クト の 
親 に あたる の が 
Window オ ブ ジ ェクト で す 。 
この オブ ジェ クト を 通じ て 
子 の オブ ジェ クト を 操作 し ます 





男 eIefzldlela 





プラ ウザ オプ ジェ クト は 、 
役割 ご と に 分 類 さ れ て いま す 


画 e】efzl 和 le 
レ アム アム ルク に 


HIiStOry 
オブ ジェ クト 


jeielllillslali 
レ アム アム ルク に 


ペー ジ ト 上 の 部 品 


プ ブラ ウザ オプ ジェ クト を 使え ば 、 
プラ ウザ や ブラ ウザ に 表示 し て いる 
Web ペ ー ジ を 
JavaScript か ら 操 作 で きま す 


Kr うた 2 
ーー ダイ アロ グ ボ ックス を 
表示 し て ! 


の リグ ゲー 
すぐ に 
表示 する よ 


ブラ ウザ や Web ペ ー ジ に 関す る 情報 を 持つ オブ ジェ クト を 、 ブ ラウ ザ オ ブフ 
ジェ クト と 呼び ます 。 本 章 で は ブラ ウザ オブ ジェ クト の 種類 と その 機能 に つい 


て 学び ます 。 
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賠 ブラ ウザ オブ ジェ クト 





%⑳)) ブラ ウザ オブ ジェ クト と は 


ブラ ウザ 上 の 情報 は 、 す べ て オプ ジェ クト と し て 扱う こと が で きま す 。 こ れ 
ら の オプ ジェ クト を 慈 称 し て プラ ウザ オプ ジェ クト と 呼び ます 。 各 プラ ウザ 
オブ ジェ クト は 、 プ ブラウザ 上 で さま ざま な 操作 を 行なう た め の 機 能 を 提供 し ま 
す 。 表 91 は 、 よ く 使 われ る ブラ ウザ オプ ジェ クト で す 。 





表 9.1 主 な ブラ ウザ オブ ジェ クト 一 覧 
と アム アホ コン 4 エー 
すべ て の ブラ ウザ オブ ジェ クト の 親 と な る オブ ジェ クト ( ブ 
ラウ ザ の ウィ ンド ウ 全 体 の 情報 を 持つ オブ ジェ クト ) 
、 Web ペー ジ の URL を 情報 と し て 持つ オブ ジェ クト 





Web ペー ジ 上 の 部 品 の 情報 を 持つ オブ ジェ クト (Web ペー 
ジ の 情報 を 持つ オブ ジェ クト ) 


Web ペー ジ の 閲 覧 履歴 を 情報 と し て 持つ オブ ジェ クト 





プラ ウザ オブ ジェ クト は 、 ブ プラ ウザ に 組み 込ま れ て いる オプ ジェ クト で 
 \ 


す 。 ブ ラウ ザ の 種類 に よっ て は ブラ ウザ オブ ジェ クト (以降 で 紹介 する プ 
ロ パ ティ や メソ ッ ド ) の 挙動 が 若干 異な る 場合 も あり ます が 、 こ こ で 紹介 する 主 
要 な も の に つい て は ほとん ど ご 動作 に 違い は あり ませ ん 。 


プラ ウザ オプ ジェ クト も 多く の メソ ッ ド や プロ パテ ィ を 持っ て いま す 。 プラ 
ウザ オプ ジェ クト の メソ ッ ド や プロ パテ ィ を 利用 する 場合 も 、 先 頭 に オブ ジェ 
クト 名 を 指定 し ます が 、 こ の 際 、 オ ブ ジ ェクト 名 の 頭 文字 は 小文字 に し ます 。 


Window 墜 windOow 


Location |ocation 
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ビリ PIT す で) も たい WW いひ ゃ WW テマ W』 マ ォ みす マ ゃ fk た な W で キキ や W お サオ ネネ Fw ャ wmMIW キ キャ WT mWSwWWP* す WWNWWWSwWN ま キ W ず WW を さま < を wwh ャ FwW せ Ba MWT a お JULEE BS 月 ま た 生出 ゝ - ャ PTNWW よ まそ や すず WW ゃ す テ キャ キャ ル ョ リャ 
wW か ャ Mj トー ニー 3 ュ ETIRTNHMIVIWEIERA ル AE JDA まま WNW ER WNW * を や イド W き まや 1 相 ま mn: むず W ず が 本 東吉 W WT 生 - NN ず すず WWNMN※ W W ポ や WW ササ 4 ます すず w 衝 打 ま た IN の で せり 
し | SS a en WM  ( 間 析 閥 4 Nm IA アザ 9 。 や WW 齋 還 導 見 本間 居 ま WW が WW WW EE Wi - すず 者 き 証 ヤギ ネリ WW や NANA WW NNWYWWWYrW ネ ゃ Nr W が を か や WWWdW 和 SWWPWY な OMWWwwSAY や WiwAWE せ WW 本 ye TE 守 肖 当 」 
WW ず "4。 ド ザー ェ _ AM ッ アァ 叫 M 人 W ご 訂 リル ルド リィ WWWYNWWNW* ・ WWNWULWMNNWMNW さ で や ボネ IN NSNVNwwWwN ル も ルル ぴ WUw W ま MM ル WAYPMWN ま 4 WJ WW パ WNWWW*MWYAWATW か リリ WW っ AIWN WAMWMWWNP ザ 

N huA きす m 間 ー イ WNWWWWwK ま Waー ポ WWYWwmwW イ 光 も NMWWAWNWWWN ま WWwWAMNWWWN 放 が 店 條 WI WW ポ WANWWwwWNwwAWWWAMNtWYWM 上 NWWWA 人 WWWMYIhWWWAN ま WWNW 上 ネル や 和 呈 PD 1WWdA WI ひ 7 や ル サ WW すず 央 MM RWIW 和 WM た WW 半 本 が NW 


History 叶 history 
Document 只 document 


Window オブ ジェ クト は 、 ブ ラウ ザ の ウィ ンド ウ 全 体 を 表わす オブジェ クト 
で す 。 す べ て の ブラ ウザ オブ ジェ クト は Window オプ ジェ クト に 内 包 さ れ て い 
し 


Window [ TYP 
Window は ブラ ウザ の 
ウィ ンド ウ 全 体 を 
表わす オブ ジェ クト 


ブラ ウザ の 
ウィ ンド ウ 












OTTO 


すべ て の ブラ ウザ オブ ジェ クト は Window オブ ジェ クト に 含ま れる 





その た め 、 ブ ラウ ザ オ プ ブ ジ ェクト を 利用 する と き は 、Window オ ブ プ ジ ェ クト 
を 先頭 に 記述 し ます 。 た と えば 、Location オブ ジェ クト の href プロ パテ ィ を 利 
用 する 場合 、 次 の よう に 記述 し ます 。 


window.1ocation .hreFfF 


た だ し 、 先 頭 の Window オブ ジェ クト 、 つ まり 「window.」 は 省略 し て も 良 
いこ と に な っ て いま す 。 よ っ て 、 次 の よう に 記述 し て も 同じ 意味 で あり 、 通 例 
で は この よう に 記述 し ます 。 以 降 、 本 書 で は すべ て の 命令 か ら 「window.」 を 
省 いた 状態 で 記載 し ます 。 


1ocation .hrefE 


次 節 か ら 、 ブ ラウ ザ オ プ ブ ジ ェクト の 中 で も 特に よく 利用 きれ る Window、 
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kp ブラ ウザ オブ ジェ クト の メソ ッ ド や プロ パテ ィ を 呼び 出す と き 、 
オブ ジェ クト 名 の 頭 文 字 は 小文字 に する 。 


p 先頭 の window. は 省略 で きる 。 


_E tetsidiee vccir 二 | 


⑳ 1 以下 は Window オ ブ ジ ェクト に 関す る 説明 で す 。 空 欄 A と B を 適切 な 語 
で 埋め ゆ て くだ さい 。 


・ す べ て の ブラ ウザ オブ ジェ クト の [| A | と な る オブ ジェ クト で 、[ B | に 関す る 情報 
を 持つ 。 





ご 解答 は 巻末 に 掲載 
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> 昼 Window オブ ジェ クト 





ブラ ウザ の ウィ ンド ウ 全 体 の 情報 


Window オブ ジェ クト は 、 す べ て の ブラ ウザ オブ ジェ クト の 親 と な る オブ 
ジェ クト で 、 プ ブラ ウザ の ウィ ンド ウ 全 体 の 情報 を 保持 し ます 。 ウィンド ウ 全 
般 に 関す る 操作 を 行なう こと が で きま す 。 前 章 ま で に 使っ て きた alert 命 令 も 、 
Window オブ ジェ クト の メソ ッ ド の 1 つ で す 。 








表 9.2 Window オプ ジェ クト の 主 な メソ ッ ド 一 覧 















メゾ ソ ッ ド 名 概要 


警告 用 の ダイ アロ グ ボ ックス を 表示 する 


し と ん だ ルー ムル 
サブ ウィ ンド ウ を 閉じ る 4 
タイ マー を 解除 する 


これ ら の 使い 方 を 見 て いき まし ょ う 。 


confirm メ ソ ッ ド 


ダイ アロ グ ボ ックス を 表示 し ます 。 confirm メ ソ ッ ド は OK と キャ ン セ ル の 2 
つの ボタ ン を 表示 し 、 ど ちら の ボタ ン が クリ ッ ク さ れ た か を 示す 論理 値 を 戻り 
値 と し て 返し ます 。 
















ss COTfirm メ ズ メソッド 
conEirm ("表示 する メッ セー ジ 『) 』 


衣 MM true…OK/false… キ ャ ン セ ル 








eeA 前 節 で 説明 し た と お り 、 オ ブ ジ ェクト 名 の 「window.」 は 省略 する の が 通 _ 
例 で す 。 以降 で 紹介 する メソ ッ ド も 基本 的 に 省略 し ます が 、 close メ ソ ッ 
ド だ け は 特別 に 省略 し ませ ん 。 こ れ は の ちほ ど 説明 し ます 。 


リス ト 9.1 確認 用 ダイ アロ グ の 表示 


< !DOCTYPE html> 
<html] 1and="]a"> 
<head> 
<meta Char8e キ ="utfF-8 リ "> 
< 上 1 上 1]e>JaVaScr1pt の 練習 < / 上 1 上 1e> 
く <8C エ ユエ D ヒ > 
function cheock() { 
Var re8u1t = oonfirm( "確認 用 の メッ セー ジ を 表示 し ます ") : 
if (regsu1t) { 
console.1od す ("OK") : 


) e1se { 
congo1e.1og ("キャ ン セ ル 『") : 


} 


</ 8C エ 1p キ > 
</head> 
<DOQdY> 
<button onoc1iock= "ohecok ( ) , "> クリ ッ ク </button> 
</ body> 
</htm1 > 
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INNEIR ま ま ま ERJENIEI。 ・ た まれ まれ あま えま あえ ある 2 WiwN で すず で 放 = we キキ ギャ 古 ド まる ネネ W ま ょ mvw 本 メオ す ゴ N まま ので ド ず キャ が も まま wwckWw き まま キ を すず Y< w すず WW WM 左 まま WWNWK テ mm ザヤ WW か まず 本 we ネ WNW サ -w W wm WW ず か まず を 生み すず W WW と IPwW で さま 

DO 7 で で マイ で リッ 時 w 二 " し きま 7 」 R 。 天 。 伸 WI 下 し 衣 . きま W Aa ギ Ww WW キ FT _- 「 _- _- W Am N ル が I ず を も WWWWWIA ま WMNWAMWNW ず すか キル ャ WW WI WW 4 N| 軸 . 0 - Wi いな 
ANWNW 小生 あず ポル WM _ 還 半 hi mi 衣 還 F. 還 語 記 ww ボ " に ) やり WWWMWMWW ず WUWWNWWNMWW も WWNWWWWw ホ ドド げ WWMI 闘 WWWWNWWY キ NANO W 1 ゃ WNWMWWMWNWYWANYWRWWWMWWNWOWONYMWNmWWW キ NNWW す WW ド NNWW 衝 ゆま WW ポキ あ ポ WWAWYNWT AA みゆ の 
PETJUUSAG ま LEII。 「 MI AN いで サポ ゴ ず テ イ WS 4 ま V パテ /NI1 パル WWWWNNWMNNNWWANAWYYNwWNA _- NWNW ま を MM ポ N ギ WWWANN WWWNWhNWNNWNWWNMNNTWNW あ WNWNWNWYYNNW ギ WM WNWwWWNWW や WMWY 洛 まま nw NNYNNWAMN EE まお まま 
ivihe ひ や や ツマ で 1 TIYT TL 了 .RRW、。 ・ お を < 逢 灯 | 東 aa ar WW4 パ ド や WMWNWJAN ドル ポ MW ま AWTVWWANWM YYWWJWGWW NNWANW 具 利和 WANN NNN4WAN ザ まま 小 WWWYNWWPT NN あ WIWWNNMWN ま WWYNMNNNNAMN ポ WT  ( WWWIWNWA キ ャ 』 P w 


層 実行 結果 






/ 臣 ) avaScript の 栓 和 ' 衣 3 AN 
人 | me:/7/C:/worvtse- 1.html 
ーー ドレー ババ 






| リッ ク | 


Q <iopframe> Y 人 訪 Errors Warnines Loss 






品 





マ [OK] を クリ ッ ク 
|「) JavaScript の 細 
ea Bk:77cyworvtstothm。 つ ー  、 癌 


生 viocp6 際 





キャ ン セ ル 


四 滞 Q <top frame> Y で | Errors wernincs Loes 


ODen メ ソ ッ ド と close メソッド 








open メ ソ ッ ド で ブラ ウザ の 新規 ウィ ンド ウ ま た は 新規 タブ を 開き 、close メ 
ソ ッ ド で 閉じ ます 。 ウ ィ ン ド ウ と タプ の どちら が 表示 され る か は ブラ ウザ の 設 
定 に 依存 し ます 。 


ss ODG ロ メソッド 
Open ( "URL 。 "ウィ ンド ウ 名 『"。 “オプ ショ ン ] = 値 , オ プシ ョ ン 2= 値 ・・・『) 』 





第 29| 数 以降 は 省略 可能 
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open メ ソ ッ ド は 、 新 規 ウ ィ ン ド ウン タブ を 開き 、 指 定 さ きれ た URL に 移動 し 
ます 。 第 2 引数 以降 は 省略 可能 で す 。 第 3 引数 に は 、 次 の オプ ショ ン を 複数 指 

定 で きま す 。 た だ し 、 新 規 タ プ と し て 表示 され た 場合 、 オ プシ ョ ン の 設定 は 無 
視 さ れ ま す 。 


Open メソ ッ ド の オプ ショ ン 一 覧 





ン ア ムン ゆ ア ス 値 説明 


ん HK 


height 。 | ピク セル 値 | ウィン ドウ の 高 さ 


に 本 5 し 値 | デス クト ッ フ 画面 の 上 端 か ら ウ ィ ン ド ウ ま で の 嘘 区 


リト デス クト ッ プ 画面 の 左端 か ら ウ ィ ン ドウ まで の 距離 












現在 の ウィ ンド ウタ ブ を 閉じ る に は 、close メソ ッ ド を 使い ます 。 


ea CIOSB メ ソ ッ ド 


window.cClose(): 





閉じ る こと が で きる の は 、open メ ソ ッ ド に よっ て 開か れ た ウィ ンド ウン タプ 
の み で す 。 な お 、Document オ ブ プ ジ ェ クト に も close メ ソ ッ ド が 存在 する た め 、 
メソ ッ ド 名 の み を 指定 し て 呼び 出す と うま く 動 作 し ませ ん 。Window オブ ジェ 
クト の close メ ソ ッ ド で ある こと を 明示 する た め に 、 必 ず 「window.」 は 省略 せ 
ず に 記述 し て くだ さい 。 

リス ト 9.2 は 、ljist9 2A.html か ら list9_2B.html を 新規 ウィ ンド ウ で 開く スク リ 
プ ト で す 。 





リス ト 9.28 サブ ウィ ンド ウ の 表示 
HTML1 list9_2A.html 





< !DOCTYPE html> 
<htm] ]anqd="]a"> 

<head> 

<meta Char8e ヒ ="utfF-8 リ "> 

<t 上 1]e> メ イン ウィ ンド ウ < / 上 1 上 1e> 

</head> 

<DOdY> 

<button onc1]iock="open(']ist9 2B.htm1] ', nu11, !width= 兄 
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300,height=150! ) : "> 開く </Dutton> 
</ body> 
</htm1 > 





HTML2 list9_2B.html 


< !DOCTYPE html> 
<htm] ]anqd="]a"> 
<head> 
<meta Char8e ヒ ="utfF-8 リ "> 
<tit1e> サ ブウ ィ ン ド ウ </tit1e> 
</head> 
<DOQY> 
<jbutton onc1]iock= "window.c1oge( ) : "> 閉じ る < / button> 
</ Dody> 
</htm1] > 


[ メイ ン ウィ ン ドウ 絶 
を 人 あ で 問 fle:///C:/work/list9_2A.html 還 


ここ - ム ーーーーーーーーーーーーーーーーーーーーーーーーーーー エーーーーーーーーーー ーー ニーーーーーーーーーーーーー-ーーーーーーーーーーーー ーーーーーーーー ーーーーーーーーーー ニ ーーーーー ーー ボーー ペ < に ーー ニー ニー = ーー 一. 








[開く ] を クリ ッ ク 
[閉じ る ] を クリ ッ ク 


X 


| 人 le:///C:/work/list9_2B.html ーー に 
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Setlnterval メソ ッ ド と clearlnterval メ ソ ッ ド 


9 


setInterval メ ソ ッ ド は 、 一 定 の 間隔 ご と に 処理 を 呼び 出す 、 タ イマ ー 機 能 を 
開始 し ます 。 一定 間隔 で 表示 画像 を 切り 替え る な どの 用 途 で 使わ れ ま す 。 タイ 
マー を 停止 する に は 、clearInterval メ ソ ッ ド を 使い ます 。 








叶 ふ Setlnterval メ ソ ッ ド 


getTnteryva1 (関数 名 また は 関数 式 , 時 間 間 隔 ) : 
タイ マーID 









時 間 間 隔 は ミリ 秒 (1/1000 秒 ) 単位 で 指定 し ます 。 時 間 間 隔 の 精度 は プラウ 
ザ に よっ て 異な り ま す が 、1 秒 以上 大 きく ずれ る よう な こと は まず あり ませ ん 。 

タイ マー が 開始 さき れる と 、 指 定 さ れ た 処理 が 一 定 間隔 で 実行 され 続け ます 。 
この メソ ッ ド の 戻り 値 は せ 、 タイ マー に 割り 当て られ た ID で す 。 ID は 、 タ イ 
マー を 停止 する 際 に 必要 と な り ま す 。 

タイ マー を 指定 する に は 、clearInterval メ ソ ッ ド を 使い ます 。 こ の メソ ッ ド 
は 、 指 定 さ れ た ID の タイ マー を 停止 し ます 。 


%WsS clearlnterval メ ソ ッ ド 






clearTnterva1 (タイ マーTD) 


タイ マー の 利用 例 を 見 て み ま し ょ う 。 


リス ト 9.3 タイ マー 機能 の 利用 (JavaScript) 


8 COUn = Oz 
ゞ ar imer = ge 上 Tntera1 (Output, 1000)』 
Eunction output() { 

COUuUn ヒ 二 二 』 


congo1e.1og(count + " 秒 経過 !): 
if(count >= 10) { 
clearT エ nterYa1 (上 1mer) : 
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還 実 行 結果 


[ "JavaScript の 練 胡 ・ 
を 3 @G 口 fle:///C:/work/list9_3.html 。 


ーー トー ュー ーーーーーー ツ ーー ヘーーーーーーーーー ペ ツテ ーーーーーーーー ペ ーーー ニー ツン ペ い - ペ ペン ーーーーーーー ーー ハマ ムー 





16 秒 経過 
ヶ 





回 。 寺 へ に ) <top frame> Y 紀要 | Frrors Wernines Loes 


リス ト 93 で は 、1000 ミ リ 秒 (1 秒 ) ご と に output 関 数 を 呼び 出し て いま す 。 
output 関 数 は 経過 時 間 を コン ソー ル に 表示 し ます 。output 関 数 が 10 回 呼び 出 
され た 時 点 で 、 タ イマ ー 機 能 を 停止 し て いま す 。 

また 、setInterval / clearInterval に よく 似 た メソ ッ ド に 、setTimeout 
グ clearTimeout が あり ます 。 引数 な どの 記述 方 法 は どちら も 同じ で す 
が 、setInterval / clearInterval が 処理 を 開始 する 間隔 を 指定 する の に 対し 、 
setTimeout / clearTimeout は 処理 が 終了 し て か ら 何 秒 後 に 次 の 処理 を 開始 す 
る の か を 指定 し ます 。 第 14 章 で 学ぶ アニ メー ショ ン の よう な 、 完了 ま で に 時 間 
が か か る 処理 を 実行 する 場合 は setTimeout clearTimeout を 利用 し まし ょ う 。 





SetlInterval(func. 1000): 





1000 ミ リ 秒 1000 ミ リ 秒 





700 ミ リ 秒 1000 ミ リ 秒 700 ミ リ 秒 1000 ミ リ 秒 


setlnterval と setTimeout の 違い 


216 


p Window オブ ジェ クト は すべ て の ブラ ウザ オブ ジェ クト の 親 に 
あたる オブ ジェ クト で 、 ダ イア ログ ボッ クス の 表示 や タイ マー 
処理 を 行なう こと が で きる 。 


還 Oheck est 


⑳ 1 open メ ソ ッ ド で 開い た ウィ ンド ウ ま た は タブ を 閉じ る に は 、 ど の よう な 
部 令 を 記述 し ます か ? 

Q setinterval メ ソ ッ ド と setTimeout メ ソ ッ ド で は 、 ど ちら の ほう が 処理 
の 実行 間隔 が 長く な り ま すか ? 





ご 解答 は 巻末 に 掲載 
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Location オ ブ ジ ェクト と 
History オ ブ ジ ェクト 








Web ペー ジ の URL 情報 (Location) 








Location オ ブ ジ ェクト は 、Web ペ ー ジ の URL を 情報 と し て 持つ オブ ジェ 
クト で す 。href プロ パテ ィ の 値 を 変更 する こと で 、 別 の Web ペー ジ に 移動 で き 
ます 。 


%⑳ 生存 の URL を 書き 換え る 


1ocation.href = 移動 先 URL 





層 記 述 例 
1ocatton.href = "hp: //www.gooqd1e . co. jp/ "』 


Web ペー ジ の 履歴 情報 (History) 





History オ ブ ジ ェクト は 、Web ペ ー ジ の 閲覧 履歴 を 情報 と し て 持つ オブ 
ジェ クト で す 。back メ ソ ッ ド で 1] つ 前 ペー ジ に 戻る こと が で きま す 。 プ ラウ ザ 
の 戻る ボタ ン を クリ ッ ク し た と き と 同 じ 挙 動 で す 。 


$ 前 の ペー ジ に 戻る 


history .bacK ( ) : 





リス ト 94 は 、location.href と history.back() を 利用 し て 2 つの ペー ジ 間 を 移動 
する スク リプ ト で す 。 





リス ト 9.4 ペー ジ 間 の 移動 
HTML1 IiSt9_4A.html 


< !DOCTYPE htm1l> 
<htm1] 1anqgd="]a"> 
<head> 
<meta Char8e ヒ ="utfF-8 リ > 
<t 上 1 上 1e>JayaSor1ipt 上 の 練習 </ 上 1 上 1e> 
</head> 
<DOQY> 
<h1>11st9 4A.htm1</h1> 


<button onc1iok="1oocation.href=']1st 上 9 4B.htm1'! "> 凡 


移動 する </button> 
</ body> 
</htm1 > 


HTML2 liSt9_4B.html 


< !DOCTYPE html> 
<htm1] 1]anqd="]a"> 
<head> 
<meta Char8e ヒ ="utfE-8 リ "> 
<t 上 1 上 1e>JavaScr1p 上 の 練習 < / 上 1t 上 1e> 
</head> 
<DOdY> 
<h1>11st9 4B.htm1</h1> 





<button onc1iok= "higtory .back ( ) : "> 戻る </ Du 上 上 On> 


</ body> 
</htm1] > 


《。 う @ [fle://C:/worylist9_4Ahtm。。。 。 裕 


ーーーーー…ーーーーー バ ーー ーー ーー ニーーーー 


list9_4A.html 








述 し ます か ? 
⑳⑳ ブラ ウザ の 戻る ボタ ン を クリ ッ ク し た と き の 動 き を JavaScript で 実現 す 
る に は 、 ど の よう な 命令 を 記述 し ます か ? 





ご 解 生 は 巻末 に 掲載 
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し 量 Document オ ブ ジ ェクト 






Web ペー ジ の 表示 情報 


Document オ ブ ジ ェクト は 、Web ペ ー ジ 上 に ある すべ て の 部 品 の 情報 を 持 





つ オ ブ ジ ェクト で す 。Document オ ブ ジ ェクト を 介し て 、 個 々 の HTML 要素 に 
アク セス で きま す 。「 ア クセ ス 」 と は 、 デ ー タ の 読み 出し (取得 ) や 書き 出し ( 変 
更 ) を 意味 し ます 。 

HTML 要素 へ アク セス する に は 、 次 草 で 学ぶ getElementById メ ソ ッ ド を 
利用 する 方 法 が 一 般 的 で す 。 し か し 、 例 外 的 に フォ ー ム 有 要素 に 対し て の み 、 
name 属 性 を 指定 し て の アク セス が 可能 と な っ て いま す 。 





記 述 例 














<fForm na yo 
<input tyDe ax 上" name=" 4 
</ Form> document.frm.message で アク セス で きる 


リス ト 95 は 、 送 信 ボ タン を クリ ッ ク す る と フォ ー ム の 人 入力 チェ ッ ク を 行なう 
% み リプ トト で す 。 
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リス ト 9.5 フォ ー ム の 入力 チェ ッ ク 


< !DOCTYPE html> 
<htm1] 1anq="]a"> 
<head> 
<meta Char8et="utE-8 リ "> 
< 上 1t]e>JavaScr1ipt の 練習 </ モ 上 1 上 1e> 


く <8C 了 1p キ > 
function inputCheck ( ) { 
1f (document . frm1 .1astname .Ya1ue == "") {ーーーーーー 一 一 起 
alert(" 姓 を 入力 し て くだ さい り ") 
) e1ge if (document.frm1 .firstname.Yalue == "") { 


a1ert(『 名 を 入力 し て くだ さい 『) 


) e1se if (!document . Frm1 .gender [0] .checked && 
! document . frm1 .dender [1] .cheoked) た 9 


al1er も ("性 別 を 選択 し て くだ さい ") , 一 一 ーー 一 ーーーーーーーーー《》 
) el1se { 
document . Frm1 . gubmit ( ) , 一 ーーーーーーー《 
) 
) 


< く / 8Cr1p キ > 
</head> 
<DOdQY> 
<Form name= "Frm1" ac 上 1on= "xxx .htm1 "> 
<F1e1dSe> 
<]egend> 名 前 </ 1eqend> 
<]abe1] > 姓 
<1nput tyDpe= "text" name="1astname "> 
</ 1abe1] > 
<]abe1 > 名 
<1nDput 上 tyDe= "text" name="fF1rstname リ "> 
</ 1abe1] > 
</Fie]1dse> 
<F1ie]1dSe> 
<1egend> 性 別 </ 1egend> 
<laDbe」] > 
<1nput tyDe= "rad1o" name= "dender" Yalue="m"> 男 
</ 1abe1] > 
<」abe] > 
<1nput type="rad1o" name= "dender" Value="fF リ "> 女 
</ 1abe1] > 
</Fie]dse ヒ > 
<1nput type="jbutton" onc1iock="1inputCheck ( ) : " va1ue=" 送 信 ">-3 
</ Form> 
</ body> 
</htm1 > 
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画 実 行 結果 


/ hescpowm  ・N 


Ge 








を っ 3 口 )fle:///C:/work/list9_5.html 。。 。 。 補 ) 周 


| と と ーーーーーーー ーー ムー ニー ニー ーー ニー ニーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ニ ーーーーーー ーーーーーー ーーーーーーーーーーーーーーーーー 一 


ーーーーーーーー 1 











フォ ー ム の 送信 ボタ ン が クリ ッ ク さ れ だ た タイ ミン グ で 、 入 力 チ ェ ッ ク を 行 
な う inputCheck 関 数 を 呼び 出し て いま す 。 信 力 チ ェ ッ ク を 行なっ て NG だ っ 
た 場合 は 、 デ ー タ の 送信 を キャ ン セ ル し ます 。 そ の た め 、 リ スト 95 の の 
よう に 、 ボ タン の 種類 は 送信 ボタ ン (type='submit ) で は な く く 汎用 ボタ ン 
(type= button ) に し て いま す 。 


<1nput 上 ypDe= "button" ono1iok= "1nputCheck ( ) : " value=" 送 信 "> 


inputCheck 関数 で は 、 ま ず 輸 で 「lastname」 と いう name 属 性 値 を 持つ 要素 
に アク セス し て いま す 。 


if (document .frm1.1astname .Ya1ue == "") { 


「 フ ォ ー ム 名 . 要 素 名 ] と いう 書式 で 、 特 定 の 要素 に アク セス で きま す 。 





document .Erm1 .1agt 上 np 


が 





e 
NN AUOMMUUMI UTU SAM A7MMM/ WU AMMUOUAJDuM WEGO 「 000ML UN MODUMI/ い OM 1 
- に 

ロ * 本 い DA て いっ 04k OK fa 5 LN じい さ の あす 1 ご rd G 7 いま 。 し っ 旨 AA て い た は お て あま 18 
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恒 重度 全 衝 ( 生ま W ま PPE EE ませ れい まま か ャ ETPPFGNWIUUIAZ RLL は MANI WWWWIK ネ も も * - で で 
WAVW 生生 ーー チー ! 有 イ す 2 プチ ナー ア 、 WWW 間 還 0WW 全 W 間 ポ 親 WW ヤギ あま の 生か の りか りす その いや か すり を で か ゆび で の の ゆい させ h の や イリ と WT すり で で か の で で すす リオ アイ も の サナ アリ wwwWeWWeNWWYWNW リ 
OO サ を 和信 か で ン Me WW WI パッ が ホッ WW / が eu の iv 還 り りり いり 介 で の のり ゆか りり も びす WOOO サザ Y す WOOD の Tn いみ の MWh rt かす 人 の す ル ヤヤ か 0 も か サヤ - の WW で 合作 WM 
ゆか LDKTT UN mW Aa 井 呈 介 か WW 和 凍 人 呈 和 か 二 汰 病 旧 WW 凍 利 因り 省 邊 相 硬 生 WWAWWNWNWWWNWWWWNWNAM MirkihhhD る 人 邊 か ゆび の GOW り を WW 上 W ポ WNW いす W 全 下 下 上 着 伸 WWWWMUN AM マル 涼 池 旨 放 AN 量 半 導 県 すす 人 必 條 岳 導 笛 征 WW 
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自 定 の 要素 に アク セス で きた ら 、 き さらに ドッ ト (.) を 挟ん で 要素 の 属性 名 
を つなげ る こと で 、 属 性 値 を 参照 で きま す 。 テ キス ト ボ ックス の value 属 性 は 、 
入力 され た 文字 列 を 表わし ます 。 


if (document .frm1.1astname . uu 0 


ぐ input> 要素 の 属性 名 


name 属 性 値 が 同じ 要素 が 複数 ある 場合 、 妥 素 は 配列 と 同じ よう な 形式 で 取 
得 き され ま す 。[「gender」 と いう 属性 値 を 持つ ラジ オ ボ タ ン は 2 つ 存 在 す る の で 、 
「documentfrml.gender」 は イン デック ス 0 番 目 と 1 番目 の 2 つの 要素 を 持っ て 
いる こと に な り ま す 。 


document . frm1 .dender [0] 
> <1nput tyDe= "rad1o" name= "enQder" Value="m リ "> 
document . Frm1 .dender [1] 


し > <1nput tyDe="rad1o" name="ender" Yalue="F リ > 


9 の で は 、 オ プシ ョ ン ボ タン の 選択 状態 を チェ ッ ク し て いま す 。 オ プシ ョ ン ボ 
タン と チェ ッ ク ボ ックス は 、 要 素 が 選択 され た 状態 の と き 、checked 属 性 の 値 
が true に な り ま す 。2 つ の オプ ショ ン ボ タン の checked 属 性 の 状態 が どちら も 
false で あっ た 場合 は 選択 が 行なわ れ て いな いこ と に な る た め 、 エ ラー メッ セー 
ジ を 表示 し て いま す 。 


) e1se 1f (!document .frm1 .gender [0] .checked &g 


! document . frm1 .gender [1] .checked) { 


姓 、 名 、 性 別 の 3 つの チェ ッ ク に 引っ か か ら な か っ た 場合 は 、 人 入力 内 容 に 問 
題 が な いも の と し て デー タ を 送信 し ます 。⑳ の よう に 記述 する と 、 フ ォ ー ム の 
送信 (submit) ボタ ン を クリ ッ ク し た と き と 同 様 の 働き を し ます 。 


document . frm1] . 8ubmit() : 


また 、 有 要素 の 属性 値 は 参照 だ け で な く 変 更 も 可能 で す 。 性別 が 未 選択 の 状 
態 で 送信 ボタ ン が クリ ッ ク さ れ た 場合 、 男 性 を 既定 値 と し て 送信 を 実行 する に 
は 、 を 次 の よう に 変更 し ます 。 


alert ("性別 を 選択 し て くだ さい ") 


ツレ 変更 


document . frm1 .dender [0] .checked = truez:  // 男性 を 選択 状態 に 変更 
document . frm1] . gubmit() : / / デー タ 送 信 


次 章 で は 、DOM メ ソ ッ ド を 利用 し た 、 よ り 簡 潔 な 要素 へ の アク セス 方 法 に 
つい て 学び ます 。 






p Document オ ブ ジ ェクト を 使っ て HTML 要 素 に アク セス する こ 
と が で きる 。 





この 草 の 到 達 度 チェ ッ ク 


⑳ 1 以下 の スク リブ ト を 実行 し て 、 確 認 ダ イア ログ で [OK] を クリ ッ ク し た 
場合 、 な に が 起こ り ま すか ? 





if( !oconfirm(" よ ろ し いで すか ?『) ) { 

1ocation.href = "htD ://Wwww .dOod1e . CoO. ]Dp/ "』 
) e1se { 

higstory .back ( ) : 
) 


Q⑳⑳ Q1 の スク リブ ト を 実行 し て 、 確 認 ダ イア ログ で [キャンセル] を クリ ッ 
ク し た 場合 は 何 が 起こ と こり ます か ? 
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Q⑩ 以下 の スク リブ ト を 実行 する と 、func 関 数 は 何 秒 お き に 実行 され ます 
か ? 


ya 1d = getTnterva1 (Func, 5000): 


Q⑳⑩4 Q3 の タイ マー 処理 を 停止 する に は 、 ど の よう な 命令 文 を 記述 すれ ば 良い 
で すか ? 

Q5 以下 の ぐ input> 要素 の value 属 性 に "ABC" を セッ ト す る に は 、 ど の よう 
な 命令 文 を 記述 すれ ば 良い で すか ? 


<Form name= "ff エリ > 
<1nDput tyDe=" 上 ext" name="X リ "> 
</ Form> 





ご 解答 は 巻末 に 掲載 
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この 章 で 学ぶ こと 
DOM と は 
要素 の 取得 
属性 や スタ イル の 変更 
HTML の 変更 

イベ ント ハン ドラ の 設定 











@ DOM で HTML 要素 を 操作 する 但 


HTML 要 素 は ツル に 連なっ た 特定 の HTML 要 素 に アク セス 
サツマ イモ の よう な 、 する に は 、 一 番 上 の 要素 か ら 
階層 構造 に な っ て いま す 順に た どっ て いく 方 法 も あり ます が … 


目的 の 要素 が DOM は プロ グラ ム か ら HTML 要 素 を 
下 の ほ う の 階 層 に ある 場合 は 、 操作 する た め の 仕 組み で す 。 
な か な か 取得 で きま せん DOM で 要素 の ID を 指定 すれ ば 、 


目的 の 要素 を 一 発 で 取得 で きま す 








本 章 で は 、 前 章 で 扱っ た Document オ ブ ジ ェクト に よる 要素 へ の アク セス を 
より 深く 理解 し 、 HTML に 対す る さま ざま な 操作 方 法 を 学び ます 。 
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DOM と は 


DOM (Document Object Model) は 、HTML や XML な どの マー クア ッ プ 
言語 で 書か れ た 文書 の 各 要 素 に アク セス する た め の 仕 組み で す 。 前 章 で 学習 し 
た Document オ ブ ジ ェクト が 持つ 要素 の 構造 その も の 、 あ る い は それ ら に アク 
セス し た り 操 作 し た りす る 機能 の こと を 指し ます 。 

DOM は 、 ド キュ メン ト を ツリ ー 構 造 で 扱い ます 。HTML 文書 の 場合 、 外 側 
の タグ を 上 位 の 要素 と し て 、 内 側 の タグ が 下 に 連なっ て いく イメ ー ジ に な っ 
て いま す 。 こ の と き 、 要 素 間 の 関係 を 親子 関係 や 兄弟 関係 で 表わし ます 。 
<body> 要 素 視点 だ と 、<html> が 親 要 素 、<p> が 子 要素 、<head> が 兄弟 妥 
素 、" 説 明 " と <img> が 係 要 素 に な り ま す 。 








DOM は HTML 文書 を ツリ ー 構 造 で 表現 する 
<html> la | pu 


<head> 「 
<title> タ イト ル </tit1e> 親 < く body> の 
</head> W 則 視点 だ と ・・・ 
「 7 


< くわ OQY> 2 





<p> 説明 「 
<1mq SrcC="photo1.]pd"> | 
</p> 

</body> 

</htm1 > 





DOM の ドキ ュ メ ント 構造 

TavaScript で DOM を 扱う に は 、 前 節 で 出 て きた Document オ ブ プ ジ ェ クト を 
利用 し ます 。Document オブ ジェ クト に は 、DOM の ツリ ー 構 造 を 利用 し て 妥 素 
へ の アク セス を 容易 に 行なう ヌ ソ ッ ド や プロ パテ ィ が 用 意 さ きれ て いま す 。 次 節 
で それ ら を 見 て いき まし ょ う 。 
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p DOM と は 、 ス クリ プ ト で HTML 要素 を 自由 に 操作 する た め の 
組み で ある 。 


Oheck 宝 est 1 


⑳ 1 以下 は DOM に 関す る 説明 で す 。 空 欄 A と B を 適切 な 語 で 埋め て くだ さい 
・DOM は 、HTML や XML な どの |  A | で 記述 され た 文書 の 要素 に アク セス する た め の 
仕組 み で 、 要 素 を [ B | 構造 で 扱う 。 
2 以下 の HTMIL 文書 に お いて 、 ぐ マ h1> 要 素 か ら 見 て く p> 要素 は どの よう 
な 関係 に あたり ます か ? 


<dQ ュ ユマ > 
<h1> タ イト ル </h1 > 
<p> 本 文 </p> 


</d1 ざ > 


次 の 中 か ら 適 切な も の を 選ん で くだ さい 。 
1. 親 要素 

ど . 子 妥 素 

づ . 兄弟 要素 

4. 係 要 素 





ご 解答 は 巻末 に 掲載 
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Document オ ブ ジ ェクト 
に よる HTML 本 素 の 探 作 








@ 





⑳)) 要素 へ の アク セス (要素 の 取得 ) 


Document オ ブ プ ジ ェ クト の メソ ッ ド で よく 利用 きれ る の は 、getElementById 
と getElementsByName で す 。 ど ちら も 戻り 値 と し て HTML 要素 を 返し ます 。 








sn |[) を 指定 し て 要素 を 取得 


document .getE1ementByTd ("1d 属 性 値 ") : 
HTML 要 素 







name 属性 値 を 指定 し て 有 要素 を 取得 


document .getE1ementsByName ("name 属 性 値 ") : 
HTML 要 素 の 集合 






id 属性 に は HTML 文書 内 で 一 意 と な る 値 が 設定 され る の で 、getElementByld 
メソ ッ ド で 取得 され る 要素 は 1 つ だ け で す 。 そ れ に 対し 、name 属性 の 値 は 重複 
が 許さ きれ て いる の で 、 複 数 件 の 要素 が 該当 する 可能 性 が あり ます 。 そ の た め 、 
getElementsByName メ ソ ッ ド の 戻り 値 は 配列 と 同様 の 0 か ら 始 まる イン デ ッ 
クス を 持っ た オプ ジェ クト に な り ま す 。 


2 getElementsByName は Element が 複数 形 に な っ て いる 


よく ある 記述 ミス と し て 、getElementByName と 書い て し まう 場合 が あり 
ます 。「getElement」 で は な く 「getElements] な の で 注意 し て くだ さい 。 
getElementsByName は 戻り 値 と し て 複数 の 要素 を 返す の で 、Element ( 要 
素 ) が 複数 形 に な っ て いる の で す 。 
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し ーー 0 が を rv で ww 上 すず ネ 人 を キネ ネ W キ ボボ オル ボリ ww す た だ * ォ 李 Www キ NFWMVWMWWWNWAAW た チキ ャ を で ネ M ザ キ ペ wwWNW マ や %WWe 衝 まま を Fm WW ネネ リル Wi で WW AN 4 さ wawwNWY そ ネギ キョ ュ ュ ER まそ BI 削る BR WW も WW we キャ ne WWwwwWAWw 
か 1 WDW ず 人 WM mr まま WWWl 導 二 や す 層 キキ WWW まま すま ま 二 ま か 】 が や ポ さ で wawn mw ャ - Nm Y ザル キキ ネル 才 も SN 月 用 尺 示 ヽ _ 
SW 圭 生 の W) 疫 り UM wm r Wh) |  ? 証 た WW ボネ ャ ポポ ド ネ ャ ルル ルル を wWWWWWONWW *W WNWNT NNIwWWNWtWMWN や WANMN WWW\ ポ N WW V キ f IMW 導 RMTNNSN _- W _ 6 
か か TV いか 第 童 性 隊 導電 生か ゆい ゆみ yi ル 7.DW パ YY か My か や YY VIY 光 か ri の WW いぶ Yi MV 1 , 
ド メ ポ AM w WWWYW 馬 WT ん we sa や WamrA す wmAUN か "WW 座 AAWMAWNANWANMNTMWWIWYWW ま AV YYWYWWWWN _- Mu q _- _ AMWNWWwWewrw ・ ー ル w * ww*』 


まず は getElementById の 利用 例 か ら 見 て いき まし ょ う 。 


リス ト 10.1 getElementByld の 利用 


< !DOCTYPE html> 
<html] 1]anq="]a"> 
<head> 


<meta Char8e キ = "utfF-8『"> 


< 上 1 上 上 16>JaVaSCr1p 上 の 練習 </ 上 1t 上 1e> 
く 8C エ 1 エ p ヒ > 


Eunction setVa1ue() { 


Yar e]m = document .qetE1ementByTd ("上 x1『 ) : 
em。Yalue = "Hel1o!"』 


) 
</ 8C エ 1p キ > 
</head> 
<DOQY> 
く 1mDUu て t 1d="Lx1 り 0 上 VDe=" 人 eXxt リ > 
<1nDpu 革 1da"tx2" ypDe="Eext リ > 
<1nDut 1d="x3" 上 YDe="『 上 ext リ > 「 
<button onc1ick= "setVa1ue ( ) : "> クリ ッ ク </button> 
</ body> 
</htm1 > 





早実 行 結果 


| ) JavaScript の 練 吾 ・ 


和 を っ で fle:///C:/work/list10_1.html 





リス ト 10.1 は 、 ボ タン が クリ ッ ク さ れる と "tx1l と いう ID 値 を 持つ 要素 を 探 
し 出し 、value 属性 に 値 を 設定 する スク リプ ト で す 。 
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JaVaSCrIiDt " 





文書 内 で "tx1' と いう 
ID を 持つ 要素 を 検索 





HMTL 文書 


<DOdY> 
<1nput 上 1d=" セ xx1" 上 yDe="GX 上 "> 


<1nput 1d=" 人 上 xx2" 上 yYDG= "上 @GXt 上 "> 
<1nput 1d=" 革 XX3" 上 yDG= "上 ヒ @GX 上 "> 
<button onc1ick="getVa1ue() j:"> ク リッ ク ん AMdbo 
</body> 






getElementByld の 実行 イメ ー ジ 


この 例 で は 、getElementById で 取得 し た 要素 を 一 度 変 数 elm に 代 人 し まし 
た が 、 次 の よう に 変数 を 使わ ず 1 行 で 記述 する こと も 可能 で す 。 


document .getE1ementByTd ("上 x1") .Yalue = "He11o!"z 


10.1 の 網 掛け 部 分 ) の み を 掲載 し ます 。 


ンー 
以降 の サン ブル コー - ド で は 、 <body> 要素 内 と JavaScript (リス ト 


続い て 、getElementsByName の 利用 例 を 見 て み ま し ょ う 。 





リス ト 10.2 getElementsByName の 利用 
HTML (<body> 要素 内 部 の み 抜 粋 ) 


<1nDut name=" ヒ 1 上 yDe= "上 ex 上 "> 
<1nDUut name= "上 xx1" 上 YDe= "上 ex ヒ "> 


<1nDut name="x1" 上 yDe="Eex ヒ 上 "> 
<button onc1ick= "setVa]ue ( ) ,: "> クリ ッ ク </ Du 上 上 On> 





JavaScript 


function setValue() { 
var e]m = document .gqetE1ementsByName ("上 x1" ) : 
for (var ji = 0 1 < e1m.1ength: 1++) { 
e1m [1] .Yyalue = "Hel1o!"』 


) 





) 
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同 実 行 結果 


4 っ G 口 fle:///C:/work/list10_2.html 





Hol |Helel |Heleo 





リス ト 102 で は 、name 属 性 値 を 指定 し て 要素 を 取得 し て いま す 。 getElements 
ByName は 戻り 値 と し て 配列 と 同じ 形式 の オブ ジェ クト を 返す た め 、for 文 で 要 
素数 分 だ け 繰 り 返 し 処理 を し て いま す 。 ち な み に 、 該 当 す る name 属 性 値 を 持 
つ 要 素 が 1 件 だ け だ っ た 場合 で も 戻り 値 は 配列 形式 に な る た め 、 イ ン デ ックス 
は 必ず 指定 し な けれ ば な り ま せん 。 


JaVaSCrIDt 










文書 内 で “tx1" と いう 
name 属性 値 を 持つ 要素 を 検索 





HMTL 文書 


っ [0] 
っ [1] 
っ [2] 
<button onc1ick="setVa1ue() j"『> ク リッ ク </butt 上 on> 
</body> 





getElementsByName の 実行 イメ ー ジ 


K3 その 他 の HTML 属性 の 操作 
value 属 性 に 限ら ちら ず 、 対 象 の タグ に 設定 で きる 属性 で あれ ば 、 ス クリ プ ト に 
よる 値 の 変更 が 可能 で す 。 





要素 . 属性 名 三 値 


た だ し 、class 属 性 だ け は 例外 で す 。class は avaScript の 予約 語 候補 な の で 、 
その まま の 名 称 で は 使え ませ ん 。className と いう プロ パテ ィ を 使い ます 。 





3 ふ CS5S ク ラス の 変更 


要素 .className = "CSS ク ラス 名 『: 


CSS ク ラス を 切り 奉 える こと で 、 ペ ー ジ レイ アウ ト を 大 幅 に 変更 し 、 ま っ た 
く 違 う Web ペ ー ジ の よう に 見 せる こと も 可能 で す 。Web ペ ー ジ 制作 に お いて 、 
レイ アウ ト の 動 的 な 変更 は 不可 欠 で ある と 言え ます 。 


リス ト 10.3 表示 エリ ア の 切り 替え 
HTML 


< !DOCTYPE html> 
<htm1 lanqd="]a リ "> 
<head> 
<meta Char8et 上 ="utfF-8 リ > 
< 上 ュ 1 上]e>JavaScr1p ヒ 上 の 練習 </ 上 1 上 1e> 


<1ink re1="gtylesheet 上 " type="tex 上 /csgs" hrefF= "8 上 y]e . 


< く 8C エ 1p 上 > 
Function showTppan() { 


document .qetE1ementBy エ Td ("1Dpan area" ) .CclaggName 


で C 七 1VG"'* 


document .detE1ementByTd( "ho]1n area" ) . 


"Da881Ve": 


| 


Eunoction showHo]1n() { 


document .qetE1ementBy エ Td ("1ppan area" ) . 


り DaA881Ve"』 


document .qetE1ementBy エ Td ("ho]1n area") . 


!aC 上 1VG" 》 
) 
</ 8C エ 1p ヒ > 
</head> 
<DOdY> 


Clagg8Name 


Clag8Name 


className 


C88 "> 


<1nput て type="rad1io" name= "tardet 上 " Value="1" onchanqde= 凡 


"ShowTppan ( ) : " checked> 一 般 用 


<1nput type="rad1o" name= "tardet 上 " value="h" onchanqde= 凡 


rshowHo] 1n ( ) : "> 法人 用 


<ul 1d="1Dpan area" Cla88= "acCt 上 1Ve "> 


<1i> 氏 名 <1nput type="text" name= リ name "></]1> 
<] 1 > 住所 <1nput type=" リ "tex 上" name="addres8 "></ ユ > 
<]1 1 > 電話 番 号 <1nput 上 type="text" name= "上 te] "></ ユ 1 ユ > 


</u] > 


<u] 1d="ho]1n area" Cla88= "Da881Ve"> 


<]1i > 会 社名 <1nput type="text" name= "Company "></ ユ 1> 
<1i> 部 署名 <1nput type="text" name= "busho"></ ユ 1> 
<11i > 担当 者 名 <1nput type= "上 ex 上 " name= "上 antO"></ ユエ > 
<11 > 住所 <1nput type="tex 上 " name="addres8"></ ユ 1> 
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<11 > 電話 番号 <1nput 上 type="E 上 ext" name= "上 e1 "></ ユ ユエ > 
<1 1 > 内 線 番 号 <1nput type="text" name="na1tSsen"></ ユ > 
</u] > 
</ body> 
</htm1] > 





CSS style.css 


-active { 
dtsplay: D1oCk: 


-PaS8ive { 
dsp1ay: noOnez 





琴 実 行 結果 


| JavaScript の 繧 避 


一 般 用 〇 法人 用 
* 氏 名 | 
* 住所 ' 


ーーーーーーー- 


。 電話 番 号 | 





| ) ]JavaScript の 続 習 


ーー 
1 
| 


し ーー ニーー ーーーーーーーー で ツ ーーーーー ツ ーーーーーーーーーーーーー… 





リス ト 10.3 で は 、 選 択 さ きれ た オプ ショ ン ボ タン の 種類 に 合わ せ た 入 力 項目 を 
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表示 し て いま す 。Web ペ ー ジ 上 に は 一 般 用 と 法人 用 、2 つ の 入力 項目 が 存在 し 
ます 。 こ れ を TavaScript で どちら か 一 方 だ け 表 示す る よう に 制御 し て いま す 。 

初期 値 と し て 一 般 用 入力 エリ ア の class 属 性 に は 要素 を 表示 する "active" ク ラ 
ス 、 法 人 用 入力 エリ ア の class 属 性 に は 要素 を 非 表 示 に する "passive クラ ス を 
設定 し て いま す 。 こ の 2 つの CSS ク ラス を 、 ラ ジオ ボタ ン の 選択 状態 が 変更 さ 
れ た タイ ミン グ で 交互 に 切り 替え て いる の で す 。 


③ 法人 用 ⑲ 一 般 用 | ⑳ 法人 用 
orve クラス 還 誠 識 | | Ma ラス | # 示 ] | 
人 くに ヤ ーー eeoe | 入力 エリ ア 
法人 用 
入力 エリ ア 





「 一 般 用 ] が 選択 され て いる と き は 「 法 人 用 」 が 選択 され て いる と き は 
・ 一 般 用 入力 エリ ア を 表示 ・ 一 般 用 入力 エリ ア を 非 表示 
・ 法人 用 入力 エリ ア を 非 表 示 ・ 法 人 用 入力 エリ ア を 表示 
クラ ス に よる 入力 エリ ア の 切り 替え 


要素 の 内 容 の 操作 


続い て 、 要 素 が 持つ 内 容 を 操作 する た め の innerHTML プロ パテ ィ を 紹介 し 
ます 。 


* 芝 素 の 中 身 を 書き 換え る 


要素 .1nnerHTMTL, = 文字 列 : 


innerHTML プ ロ パ ティ は 、 開 始 タ グ と 終了 タグ の 間 に 記 述 さ れ た テキ スト 
や タグ を 表わし ます 。 た と えば 、 












document .qetE1ementByTqd ("hoge " ) . innerHTML 
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が 才 あ 。9 > る ぁ の - を 9 "。 「 す * ゃ 4 _ _- が A Wa を も 二 W も ポリ た Ai み そそ 
。 aa^ ュ 3a ョ NN 后 RI 生生 間 了 > * 「 _- NW ド 莉 WWwwm ン _- N イー WV 「 _- _- PP の PTPP'P WT で す や り で 本 
A > - ) | 押 呆 東 ! - W で WW 診 N 条 WAN 「 ま UL ! WW ず NMW ホ すず WNWWw WNW ホ や WW w WWm 素 すず 
e WW すさ Wk 人 導 い 
Ay _ 4 Ye ル - 生 。。 ご まき ー ボル WIWNYNINWWq 4 * 1 _- _-  # a e - 
Wue.W 生 mW ん ル ま WM かん \ IIwPwww WM 0 「  」 「 fwwWM ぁ シボ 4 WM WNWWAANNE き WWWNWM 4 w ,Y WW 
か WW き MWNWNNNOAI 


は 、 以 下 の HTML 文書 で は 囲み 部 分 の 範囲 を し ます 。 


innerHTML の 適用 範囲 







]innerHTML 


リス ト 10.4 画像 タグ の 生成 


< !DOCTYPE html> 
<htm] 1]anq="]a リ "> 
<head> 
<meta Char8et="utfF-8 リ "> 
< 上 1 上 1e>JavaSCr1pt 上 の 練習 </ 上 1 上 1e> 
<8C エ 1p キ > 
Eunction ghowTmage() { 
Ya htm1g 了 = "。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 
Eor (Va 1 ユ =1: 1<=3』 1 ユ ++) { 
htm] 8 上 tr += "<1md SrC='1mades/frod" + ユエ + ".]pPd'>": 
) 


document .qetE1ementByTd ("1maqeArea" ) .1nnerHTML, = html8t エ : 
@ 
く </ 8C エ 1p キ > 

</head> 

<DOdy> 

<button 1d="btn" onc1iock= "showTmage ( ) : "> 読込 </button> 

<diV 1d="1magdeArea"> こ こ に 画像 が 読み 込ま れ ま す 。 < /d1> 

</ body> 
</htm1] > 





届 実 行 結果 


< 3 G bte:7/C:/worvtett0-4hml 


ここ に 画 僚 が 読み 込ま れ ま す 。 
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リス ト 10.4 で は 、<div> 要 素 内 に 3 つの <img> 要 素 を 挿入 し て いま す 。 
showImage 関数 の 処理 の 流れ を 確認 し て み ま し ょ う 。 

まず 、 リ スト 104 の 電 の 部 分 で 、 変 数 htmlstr を 空 文字 (0 文字 分 の 文字 
列 ) で 初期 化し て いま す 。 こ れ は 、 こ の 後に 続く @ の for 文 で htmlstr に 対し 
て 文字 列 の 連結 処理 を 行なう た めで す 。 変数 を 初期 化し な い 場 合 undefined 


が 既定 値 に な る の で 、 初 期 値 な し の まま htmlstr に 文字 列 を 連結 する と 先頭 に 


"undefined と いう 文字 列 が 入っ て し まい ます 。 


4 0 rtwr08-) 中 6 夫 My 
for (Var 1=17 1 ユ <=37 1++) { 
htm1 St 上 エエ += "<1md 8rC='1made8/frod" + ユエ + ".]pPd'>": 


の の for 文 の 中 で 、HTML 文字 列 を 生成 し て いま す 。 3 回 分 の 繰り 返し が 終 
了 す る と 、 変 数 htmlstr に は 以下 の 文字 列 が 代入 きれ て いま す 。 


<img 8ro=s'images/Erog1 .]p9 ! ><1mg grc='1maqes/frog2.]pg'> 別 
<1mg 8rC='1maqe8/fFrod3 . pd '> 


最後 に 、@⑯ の 部 分 で 、 生 成 さ れ た HTML 文字 列 を imageArea "と いう ID を 
持つ <div> 要素 の 内 容 と し て 設定 し て いま す 。 


document .qetE1ementByTd ("1mageArea " ) . innerHTML = htm18t 了 : 


この よう に 、innerHTML プ ロ パ ティ を 利用 する こと で 、Web ペ ー ジ 上 に 存 
在 し な い 部 品 を スク リプ ト で 作り 出す こと が で きる の で す 。 














ETW す きき きま SEESESD )、 問 ESI UL あ あま IWAWWW セ キャ キ ポ 上 ホ ポ すず すず ば WWW で wwSPFNNW ギ デキ ャ WW る AmiWWANYWW 上 ます すま きま で wwWWwtmw す すず す WY 生 で パパ m さ ペル ルト ま WWWW ル マネ で WNWMWE 御 向 生 り WW 寺 W 
= 生 | M 由 D 9 w ・ 
IEEE1 ESEC ん すす か ルト 4 さて を 0 も at か TTY TS すす を WYCOY4 キ rCyYY4rPTTY キ My よ な も の すす みて を 
WW まず WW ザ PPM = ーー ョ |] ) We を り ANwWWW NM すず WW や WWWWAWWWWWMNANW ザ ル 江 WWWPWANW す WW まま MMWASUMN WINYW ポ WWPYWPMNNP や WNWYWWWAMWNWW ま MMDUWWTIWANWWTYWMNWNWyN ポ WMWNWNWWWNDWNWNYWIWNWWMWW 和 所 
WNWAANWNWNWNT 1 WWr wwAa そ ャ す mwA ポ WNWA ォ WWA 和 NNWNWAWNMWNWNW や WS 人 WNWwWWNWWWWWWNNWNWWNWAMWDUWWMWMNWNWFNWNNINNNTNNNWWYW ト YYWWWYDNNWWWWYNNMNWTWYWNWN 表 衣 LISA2DJUALAML AL0LD2LMLLJAALU LALKAM2LUMIMIAMLULIMMMLMANJMMKLIMIMALAS MLUAE LMIL 
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《) 変数 htmlstr を 空 の 文字 列 で 初期 化 
htmlstr 


の for 文 の 中 で 変数 htmlstr に HTML 文字 列 を 連結 


htmlstr 
1 回 目 | .Wcmg grGm! hage5/ ま FODO 





htmlstr 
"<1mg Bro='1mageg/Erog1 .]pd' ><1md 8rC='1mageg/E ェ og2 .]pg'>" 









2 回 目 


htmlstr 
"<1md 8rC='1mage8/ Frog1 . Pd ' ><1mqd 8rC='1mage8/Froq2 . pd '> 
0 角間 導 人 の 生ま 007 /// 






S 回目 





《 変数 htmlstr の 値 を <div> 要素 内 に セッ ト 
htmlstr 
W<1mqd 8rC='1mages/ Froq1 . pd す 9 ' ><1mgd 8roC='1mageg/Eroqd2 .]pqd' > 本 
<1mg gros'imageg/frog3.Jpg'>" 


innetHTML を 置き 換え る 


<div 1d="1imageArea"> こ ご ここ に 画像 が 読み 込ま れ ま す 。 </d1 ゞ > 
InnerHTML 


innerHTML プロ パテ ィ の 値 が 設定 され る 流れ 


還 6heck est 


Q 1 getElementsByName メソッド の 戻り 値 は どの よう な 形式 に な っ て い 
ます か ? 


Q2 以下 の <p> 要素 の 内 容 を 取得 し 、 ダ イア ログ ボッ クス に 「 こ ん に ち は 」 
と 表示 する に は どの よう な 命令 を 記述 し ます か ? 


<p 1d="messade"> こ ん に ち は </p> 





ご 解答 は 巻末 に 掲載 






そ 全 信 イベ ント ハン ドラ の 設定 








JavaScript に よる 記述 方 法 





これ まで 、 イ ベン ト ハ ンド ラ は HTML タ グ の 属性 と し て 記述 し て きま し た 。 
し か し 、HTML に よる コン テン ツ の 定義 と TavaScript に よる 処理 の 定義 が 混 
在 し て いる と 、 散 浸 と し た 見 づら い 文 書 に な っ て し まい ます 。 で す の で 、Web 
ペー ジ を 制作 する 際 は HTML と スク リプ ト を 分 け て 記述 する こと が 推 差 き れ て 
いま す 。 イ ベン ト ハ ンド ラ の 設定 も avaScript で 記述 すれ ば 、HTML と スク リ 


プ ト を 完全 に 分 離さ せる こと が で きま す 。 









。HTML と スク リフ ト が 間 在 し と いる 人 


Index.html 





<htm] > 
<head> 
<8Cr1ipt srC="common.]8"></gcript> | 
</head> 
<bOdY> 
<button 1d="btn" onclick= 則 
gayHe11o() :"『> ク リッ ク </button> 
</body> 
</htm1 > 












HTML 中 に 
JavaSCriDt の 
コー ド が 混在 






COmmon.jS 


function gayHe11o() { 
console.1og("he11o") : 





HTML と スク リプ ト の 混在 と 分 離 








AA 





Index.html 
<htm] > 
<head> 
く <8Cript grC="Common .]8『> く </ 8CriDt> 
</head> 
<bodY> 
<button 1d="btn"> ク リッ ク </button> 
</body> 
</htm1 > 





イベ ント ハン ドラ の 『 
設定 も JavaScript 
で 行 な つ 


Common.jS 


function gayHe11o() { 
congole.1og("he11o『) : 


window.on1oad = funoction() { 
document .qetE1ementByTd 前 
("btn") .onc1ick = gayHe11O: 


) 』 
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叶 ふ イベ ント ハン ドラ の 変更 
要素 . イ ベン ト ハ ンド ラ = 定義 済み の 関数 名 






また は 


要素 . イ ベン ト ハ ンド ラ = function 関数 名 () { }: 0 


イベ ント ハン ドラ に 関数 名 、 ま た は 関数 式 を 代入 し ます 。 リ スト 105 は 、 リ 
スト 10.4 を 修正 し て イベ ント ハン ドラ の 設定 方 法 を 変更 し た も の で す 。 


リス ト 10.5 スク リプ ト に よる イベ ント ハン ドラ の 設定 


< !DOCTYPE html]> 
<html lanqg="]a リ "> 
<head> 
<meta Char8et="utE-8 リ "> 
< 上 1 上 1e>JaVaScr1pt の 練習 < /t1t 上 1e> 
く <8C エ 1Dp キ 上 > 
Function showTmaqge() { 
Ya て hm18t = "90: 
For (Va エ 1=1: 1<=3: 1++) 人 { 
htm1str += "<1md SrC='1maqdes8/frod" + ュ ユ + リ ".]JPd'>": 
) 


document .qetE1ementByTd ( "1maqdeArea " ) . 1nnerHTML, = htm1lgt 了 : 


) 


“ “ L 
< く / 8Cr1p セ 上 > ンー、 
whenwdk gm 
<DOQdY> 
<Dbutton 1d="Dbtn" > 読込 </ but 上 ton> 
<d1V 1d="1mageArea"> こ こ に 画像 が 読み 込ま れ ま す 。 < /d1Y> 


</ body> 
</htm1 > 


較 実 行 結果 


| ) JavaScript の 練 謝 X 和幸 還 昌 
nM すす 7 2 ii 


ここ に 画 條 が 読み 込ま れ ます 。 


き UnCaught TyPe ま FTOr: Canriot 356 て PPoDer て ty 
> 





加 。 >= Q ⑯ <topframe> Y が 馬  Errors Werninss Loex Debue 


実は 、 追 加 し た 行 は 不 完全 な の で 、 実 行 す る と コン ソー ル に エラ ー メ ッ 
セー ジ が 表示 され ます 。 メ ッ セ ー ジ の 文言 は プラ ウザ に よっ て 異な り ま す が 、 
「onclick イ ベン ト ハ ンド ラ を 設定 する 対象 の 要素 が 存在 し な い ] と いう よう な 
内 容 の は ず で す 。 

HTML の タグ は 、 基 本 的 に 上 か ら 順 に 解釈 され て いき ます 。 そ し て <script> 
タグ 内 の 処理 を 実行 し て いる と き は 、 以 降 の タグ の 読み 込み は スト ッ プ し て い 
ます 。 つ まり 、 追 加 し た 行 の 実行 段階 で は 、 ま だ "btn' と いう DD 値 を 持つ 要素 
が 読み 込ま れ て いな い 状 態 な の で す 。 そ の 状態 で getElementByIld メソ ッ ド ( リ 
スト 10.5 の 電 ) を 実行 する と 、 要 素 が 見 つか ら な いた め 、 戻 り 値 は null (オプ 
ジェ クト が な いこ と を 表わす 値 ) に な り ま す 。 null に 対し て onclick イ ベン ト ハ 
ンド ラ を 設定 する こと は で き な い の で 、 エ ラー が 発生 し て いた わけ で す 。 


document .getE1ementByTd ("DEn" ) .OncC11CK = ShOwTmade: 


く script> タグ 内 に 記述 し た 場合 の 実行 タカ イミ ング 
< !DOCTYPE htm1l> 
<html 1and="]a"> ( 
タグ は 上 か ら 順 に 
<head> 読み 込ま れる 


<meta char8et="utfF-8『"> 


= 性 ---ーー ニ ーー ニー ニー ニー ニー ニー ニー ニー ニー 


<tit]1e>JavaSCrip 上 の 練習 </t 上 1t1e> 
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<8C エ 1 上 > 


function showImage() { ぐ script> タグ 内 の 処理 を 実行 中 


は タグ の 読み 込み が 中 断 さ れる 
び &Y DEmlat ア Y = "904 


for (Var 1=1: 1<=3: 1++) { 


htm1 8 上 += "<1md BrC='1mage8/frogd" + 1 + ".]pd'>"』 


) 


document .qetE1ementByTd ("1maqeArea " ) . 1nnerHTML = html st 了 』 


document .qetE1ementBy エ Td ("DEn" ) .onc1tok = ShowTmade: 
</ gcript> 
</head> 
<DOQY> 
<button 1d= "IDtn" > 読込 </button> 
<diy 1d="1mageArea"> こ こ に 画像 が 読み 込ま れ ま す 。</d1Y> れ て いな い 


</ body> 





</htm1 > 


必 onload イベ ント ハン ドラ の 利用 

この 問題 を 解決 する に は 、 す べ て の タグ が 読み 込ま れ た 後 、 つ まり load イベ 
ント で 処理 を 行なえ ん ば 良い の で す 。onload イベ ント ハン ドラ は 、Window オブ 
ジェ クト に 対し て 設定 し ます 。 


sw OnIOadH イ ベン ト ハ ンド ラ の 設定 





window.on1oad = 関数 名 また は 関数 式 : 


リス ト 105 の 追加 行 (⑳) を 囲 な よう に 以下 の 2 行 を 書き 加え る と 、「 ペ ー ジ 
が 表示 され た タイ ミン グ で 、ID が "btn" の 要素 に onclick イ ベン ト ハ ンド ラ を 設 
定 す る 」 と いう 処理 が 行なわ れ ま す 。 





な お 、 こ の よう に TavaScript で イベ ント ハン ドラ を 設定 する 方 法 の 場合 、 関 
数 内 に this キー ワー ド を 記述 する と イベ ント 発生 元 の 要素 を 表わし ます 。 

リス ト 10.6 は 、 画 像 の 読み 込み 後に イベ ント 発生 元 で ある 読込 ボタ ン を 無効 
化す る 処理 を リス ト 10.5 に 追加 し た も の で す 。 


リス ト 10.6 イベ ント 処理 に お ける thiS キー ワー ド の 利用 


< !DOCTYPE html> 
<htm1] 1]anqd="]a リ "> 
<head> 
<meta Char8et="utE-8"> 
< 上 ュ 1 上 1]e>JaVaSCr1pt の 練習 </ 上 1 上 1e> 
く <8C エ 1 ユエ D ヒ > 
Eunction showTmaqge() { 
&Y html8tY = " り W: 
for (Var エ =1: 1<=3: 1++) { 
htm]1 str += "<1img 8ro='1mades/frod" + ュ ユ + リ ".]pPd'>": 


) 


document・ ーー ドー ん ーー テー 1nnerHTML」 = htmlStr: 


ボタ ン の 無効 化 処 理 


document .qetE1ementBy エ Td ("DEn" ) .onc11tckK = ShOwTmaqde』 


</ 8C エ 1p> 
</head> 
<DOQY> 
<button 1d= "btn" > 読込 </button> 
<div 1d="imageArea"> こ こ に 画像 が 読み 込ま れ ま す 。</d1Y> 
</ body> 
</htm1 > 
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層 実行 結果 


[) 〕avaScript の 綾 罰 x 軍 還 
3 @ fle:///C:/wortk/listt06.html 。 。 Ba 








⑳) 引数 の ある 関数 を イベ ント ハン ドラ に 設定 する 


ここ まで の や り 方 で は 、 引 数 を 持つ 関数 を イベ ント ハン ドラ に 設定 する こと 
は で きま せん 。 仮に リス ト 10.5 の showImage 関数 が 、 以 下 の よ うな 、 引 数 と し 
て 受け 取っ た 番号 の 写真 を 表示 する 関数 だ っ た と し まし ょ う 。 








function showTmage (number) { 
Yar htm]str = "<1imq Sro='1mage8/fFrod" + number + ".]p9!>!』 
document .qetE1ementBy エ Td ("1mageArea" ) .1nnerHTMT, = htm]1 gt 上 了 』 
) 


上 記 の 関数 を イベ ント ハン ドラ と 関連 付け る に は 、 イ ベン ト ハ ンド ラ に 対し 
て 関数 式 で 匿名 関数 を 代 人 し 、 匿 名 関数 の 中 で 引数 を 付け て 呼び 出し ます 。 引 
學 が 必要 な 関数 は 、 了 び 名 関数 で 包ん で あげ れ ば 良い の で す 。 


引数 が な い 場 合 


window.on1oad = Eunotion() { AM 
document .qetE1ementByTd ("btn" ) .onc1ick = 8howTmaqe 
}) 





引数 が ある 場合 


window.on1oad = Eunotion() { 








いい Wi 


! . MMP.4 MPTJWUOIUUTWU 9 
1 た 47 | YY つ "に LE 1 
・ 欄 ! 劉 まま ます 』, * に yr 
ー まず Mg 1 も て ス ネー ャ ーー が 
A ht 






利用 例 は 次 の と お り で す 。 


リス ト 10.7 引数 を 受け 取る イベ ント 処理 


< !DOCTYPE html> 
<htm] 1anqd="]a"> 
<head> 
<meta Char8et 上 = "ut 上 -8 リ "> 
< 上 1 上 1]e>JaVaScr1pt 上 の 練習 </ 上 1 上 1e> 
< く 8C エ 1 エキ > 
funotion showTmaqe (number) { 
yar htmlgstr = "<1mqg SrC='1mage8/frod" + number + ".]pPd'>"』 
document .qetE1ementByTd ("1mageArea " ) . 1nnerHTML, = htmlSt エ : 


window.on1oad = funotion() { 
document .getE1ementByTd ("btn") .onc1ick = funotion() { 
8howTmaqde (1) 』 


く / 8C エ 1p キ > 
</head> 
<DOQY > 
<jbutton 1d= "btn" > 読込 </but 上 ton> 
<div 1d="1mageArea"> こ こ に 画像 が 読み 込ま れ ま す 。 < /d1Y> 
</ body> 
</htm1 > 


| ) JavaScript の 練習 2 
AM ez77c7 ytt0 7heml = 本 ーーーーーー…ーーーーー ニ ー・ 5 ーー 





高度 な DOM 操 作 で は 、ID 以外 の 方 法 で 要素 を 取得 し た り 、 ペ ー ジ 上 に 人 存在 
し な い 要 素 を 新た に 作成 し た りす る こと も で きま す 。 詳しく は 第 12 章 で 学び ま 
す 。 
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まま まま ます オア 年 キル ヤゴ で WNW: す PWp キ イネ 4 生ま か が mw ポ ャ キネ まだ で で w さ す キル まで キキ ペド ネギ -W ま ネ w 才 まで ボキ m オ WP\ で 本 の 介 か yre mm や PET 人 YY ツタ サヤ II で て ) 

TDN も も か Sr NKKG は か すず 者 WW 生 WWW NNWWNWAMMNW イ や WAN OX が CSLMOUSNYSDNHCXAESA yy 卓二 rRIWI け 2 th キル キャ ゴ N トト T す 9 せみ みす LUL の (に < 4 

WW AN M WWYAWiwWWNWNWWWWWANYWWW や WE ま WWNWNWWW や TNI ゆか ん りか か AYAWITWMYTIYTNANMRY MNT W 121203303 ev より LeMd み viMNIO か サタ 0 か のせ 

WAN で)0 | WWAMNWNWNNINIWNNN いり 712 す か rt る 信 せ MYwWWAWWWAANYWYKWMFVWNWNMNYWWNWW 34940YMKYYYTTYYMT4RYNNNI 7 いひ か MY Ye YY 04 人 け 4H 電 

昌 提 7 し LAALEJILIALL ルル | パャ NTWNWNTNYWWITAVUYNWNYWYWNNWNWTT MuiuAJkkLLILLMALAALNAMALJLBLA 4 Mu 【 ま JJ WWW や WeNWe ポ 還 


リプ ト で 設定 する 。 


この 草 の 到 度 チェ ッ ク 





⑳ 1 以下 の <input> 要素 の value 属 性 に "ABC" を 設定 し ます 。 空 欄 を 埋め 、 
スク リプ ト を 完成 させ て くだ さい 。 


<1nput tyDpe="text" 1d="hoqde" name="FEuqda リ > 


スク リプ ト 


document.|  。 |("hoge") .value = "ABC": 


Q る Q1 と 同様 、 く input> 要素 の value 属 性 に "ABC" を 設定 する に は 、 空 欄 
A と B に な に を 記述 すれ ば 良い で すか ? 


<1nDut tyDe= "ELext" 1d= リ "hoge" name= "Fuqda"> 


スク リプ ト 
document.| A |("fuga")| Bl.va1ue = "ABC": 


Q 変数 elm に は 以下 の <input> 要 素 が 代入 され て いま す 。 空欄 を 埋め 、 
CSS クラ ス を "Tight" に 変更 する スク リブ ト を 完成 させ て くだ さい 。 


<1mput 上 ypDe= "text" 1d=" リ hoge" name="fFuga" clasg="1eFt リ "> 


スク リプ ト 
e1m.| |= right"』 


⑬ 条 変数 elm に は 以下 の <p> 要素 が 代入 され て いま す 。 空欄 を 埋め 、 姓 を 入 
力 す る テキ スト ボッ クス の 後ろ に 名 を 入力 する テキ スト ボッ クス を 追加 
する スク リプ ブ ト を 完成 させ て くだ さい 。 


く D Os PD より っ 
姓 <1nput 上 yDe= "上 ex 上 " name= "8e1"> 
</p> 
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スク リプ ト 


e1m.1nnerHTML| |" 名 <input type='text' name='meti'>": 


QB ペー ジ の load イ ベン ト 発 生 時 に 、 引 数 の 無い 関数 「func」 を 呼び 出す に 
は どの よう な スク リプ ト を 記述 すれ ば 良い で すか ? タグ の 属性 と し て 
記述 する 方 法 は 不可 と し ます 。 





ご 解答 は 巻末 に 掲載 





249 








に NiK SN この 章 
jQuery と は 

クロ ス ブ ラ ウザ 問題 
jQuery プラ グイ ン の 利用 








人 @ jQuery で らく らく プロ グラ ミン グ 参 


前 章 ま で で JavaScript の 基礎 学習 が 』 だ いぶ 命令 文 も 複雑 に な っ て き て 、 
ーー 通り 終 了 で す 。JavaScript に は 少し 疲れ て し まっ た 方 も いる 
慣れ て きた で し ょ うか ? か も し れ ま せん 


安心 し て くだ さい 。 jQuery は JavaScript の 
ここ で 救世 主 の 登場 で す ! よく 使う 機能 を まとめ た も の で す 。 
これ を 使う と 、 驚 く ほ ど 





昨今 Web サ イト で JavaScript を 使う 場合 は 必ず と 言っ て 良い ほど 
jQuery と セッ ト で 利用 され ます 。 ま すず は jQuery が どん な も の な の か を 学び 
まい しょ よう 。 
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過 」Guery と は 





%) クロ ス ブ ラ ウザ 問題 


]avaScript が 抱え る 重大 な 問題 と し て 、 ク ロス ブラ ウザ 問題 が 存在 し ます 。 
クロ スプ ブラ ウザ 問題 と は 、TavaScript を 実行 する ブラ ウザ に よっ て 、 命令 の 解 
秋 が わずか に 異な り 、 処 理 結果 に 相違 が 生ま れ て し まう こと で す 。 特に 他 の 
ブラ ウザ と 人 四 う 動き を し や すい の が 、Internet Explorer (以下 、IE) の バー ジョ 
ン 8 以 前 で す 。 リ スト 11.1 を 見 て くだ さい 。 








リス ト 11.1 子 要素 の カウ ント 


< !DOCTYPE html > 
<html 1anqd="]a"> 
<head> 
<meta Char8e ヒ ="u 人 上 半 -8『"> 
< 上 上]e>JavaScr1p 上 の 練習 < / 上 1 上 1e> 
く 8C エ 1D 上 > 
window.onload = funoC: 
funotion funoc() { 
Var G = document .detE1ementByTdqd ("Fru1t8 リ "): 
alert 上 (e.chi1qdNodes . 1enqth) : 


) 


く / 8Cr1p ヒ > 
</head> 
<DOQY> 
<u1 1Qs "fu1 ユ 18『 っ > 
<]1> り ん ご </1 ユ > 
<] エ > みか ん </] ュ > 
<]1i> い ちご </1 ュ > 
</u]> 
</ body> 
</htm1 > 


還 実 行 結果 IEB の 場 
WWY KRYYWUCYI の Y 因り WOWUOTWMM WANNA f 1 WM は U 1 リリ か ⑪ 
UM UMMAUAWIADAWTNMNAUM ON 70AY02I0O YU NUM 
リア 7 W 1 Un DUOOYWUVU 7 MK 4 vw TWDVWNUUN 
NR ON 放 ST か い NN Cu MR に NN MA WO 上 MS が 、 
は さこ WC の っ MY 2) WNW AN 
TO は 提 A な ) OO MAT MMGNUO の YA 人 TI 
0dikal AA 7 ET VAAPDTOM の TnWw 1 いし 2/ UM 『 り 』 Wi 
un YUM MAAUJW PUTOLAMITD 厚 WMi YU 由 (を WV が UM J 和 u 直 W ) 0 
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が Wim w - _- sc * * ャ テア ャ ュ ォ レッ - * w 1 * 

_ きず ず . ゃ W ポ 洋 * mw. 『 ゃ vV ー 8 や Ar 1 * ャ 
WNWWWMWNWY ペ IN _- 舞 - - 「 ポニ W Y パネ ホネ ポ ネ ポポ MY# NWWW4* WM 
WNWWAWWWWWRT 4 w W ヤオ W ・ md。6。3 < R 


childNodes プロ パテ ィ は 、 要 素 が 持つ 子 要素 を 配列 形式 で 表わし ます 。 <ul> 
要素 の 中 に は <li> 要素 が 3 つ あ る の で 、 子 要素 の 数 は 3 件 だ と 思う か も し れ ま 
せん 。 し か し 、IE8 以 外 の ブラ ウザ で は 改行 文字 も 1 つの テキ スト 要素 と し て 
扱い ます 。<ul> 要素 の 開始 タグ か ら 終了 タグ の 間 ま で に は 4 つの 改行 が 存在 す 
る の で 、 要 素数 は 7 件 と な り ま す 。 IE8 は 改行 文字 を カウ ント し な い 仕 様 に な っ 
て いま す 。 








<u1 1d="fruitg">[] 

6 GEs<2is Do | 

の (ci> み か ん </1> | 要素 は 7 つ 
6 (Gesc )a | 

</u1> 

| 


ほとん どの ブラ ウザ は 改行 文字 も 要素 と カウ ント する 






この 他 に も 、 ブ ラウ ザ に よっ て 解釈 が 異な る 命令 は いく つも 存在 し ます 。 


jauery の メリ ッ ト 








この クロ スプ ブラ ウザ 問題 を 解決 する た め に 生ま れ た の が jQuery で す 。 
jQuery は 、DOM 操 作 を 提供 する JavaScript の ライ ブラ リ で す 。 プ ブラ ウザ 間 の 
違い を 吸収 し て どの ブラ ウザ で 実行 し て も 同じ 処理 結果 を 導い て くれ ます 。 





クロ ス ブ ラ ウザ 問題 jQuery の 導入 に よる クロ ス ブ ラ ウザ 問題 の 解決 


EE 









Script 


肛 @】0[:] り 


クロ ス ブ ラ ウザ 問題 と jQuery 
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よく 利用 され る 機能 を まとめ て 部 品 化 し た プロ グラ ム を ライ ブラ リ と 呼び 
ーー ン 


ます 。JavaScript に お ける ライ ブラ リ は 、 あ る 機能 を 提供 する JS ファ イ 
拓本 


jQuery に は その 他 に も 、 以 下 の よ うな メリ ッ ト が あり ます 。 


@ 六法 が シン プル で 、JavaScript を 短く 記述 で きる 
@ CSS の 記述 方 法 に 似 て いる の で 、Web デ ザイ ナー に も 優し い 


@ DOM を 手軽 に 利用 で きる 
@ Web 業 界 で 広く 普及 し て お り 、JavaScript を 記述 する 際 の スタ ンダ ー ド 
で ある 


@ 商用 利用 だ ソー ス 改 変 / 再 頒布 可能 な オー プン ソー スラ イセ ンス で ある 


オー プン ソー ス と は ソー スコ ー ド が 無償 で 一 般 公 開き され て いる ソフ トウ ェ 
ア の こと で 、 ラ イセ ンス と は 利用 者 が 守る べき ソフ トウ ェ ア の 利用 条件 で す 。 
jQuery に は 、 オ ー プ ン ソ ー ス ライ セン ス の 中 で も 比較 的 制限 の ゆる い MIT ラ 
イセ ンス が 採用 され て いま す 。MIT ラ イセ ンス は 無償 で 使う こと が で き 、 商 用 
利用 が 可能 、 か つ カ スタ マイ ズ も 自由 な ライ セン ス で す 。 利 用 条件 と し て は 著 
作 権 の 表示 が 必須 と な っ て いま す 。 著作 権 表 記 は 、 jQuery も 含め た 多く の ライ 
プ ブラリ に お いて 、 ソ ー ス コー ド の 先頭 に コメ ント で 記載 され て いま す 。 jQuery 
に 限ら ちら ず 、 オ ー プ ン ソ ー ス ライ セン ス の ライ ブラ リ を 利用 する 場合 は 先頭 の コ 
メッ ト を 肖 き な いよ うに し まし ょ う 。 








0 上 【)tvar nr,l=typeof {t,o=e.document ,a=e.locat ion,S=e.jOuery,u=e・$,|=() ,C= 


[] f =c .concat ,d=c . PU8h Do て 09119 g=C・. index0f の 4 ring,y=| .hasOwnProperty,yp.trim,b=function(e,t)(r 
b.f 『)】x=/ [ユー]17(?7: d+(?:[eE] +-]?\d+|)/.source,W=/WS+/g,T=/^ [SWuFEFF\xAU]+ [WsWuFEFF\xAU]+$/g, 


eryig ジ コ スコ ー ド 内 の 和 作 析 家 記 

その 他 の オー プン ソー スラ イセ ンス に つい て は 章 末 の コラ ム も 参照 し て くだ 
さい 。 

な お 、jQuery は 頻 築 に アッ プ デ ー ト され て いる の で 、 常 に 最新 版 を ナ ェ ッ ク 





ォ aaM ュ = am ェ (| 生稲 還 It 用 WW 年 主 WWW: 放 本 WWW Wi 前 導 症 誠 人 
ホホ ュ ュー ャ ュー ーー。 を ポコ リャ リー デ テ ーー * ' ATFT せり せ す の 700 で サリ ササ すす す O の で YAAYSNNUMLJMMRM ASMLARSM まま まし も uikLEL ま IMA 
UIL ま まま は まま すれ. WW まま ココ 1 ます 】 ま まま 。 ^ 。 - 

NNWWWWNWWWYTA 和音 生類 ココ 1 ぜ チチ 「 チ MLIT 0 

還 拉 語 証 証 記 語 本 隔 証 本 還 是 - と 帳 衝 。 訂 証 - - 生 NMLHnmnnmhnttl WP の の IDT の で びす 7 UITULUADADJULLE2JUAALEAASSLA2MMLMKALLIAuLAMILIMMMLILAMIMLALLILIMAAAUILAASAL LMMIMLLMLIIMAA EK も MLALLAA ALSO ha I ボ W ポ や WW ポポ ポポ ネ AMAFNWNWYNWNWNwWNAN INWNNANNNNMW 


し て お きま し ょ う 。 


p jQuery は 、JavaScript の ライ ブラ リ で ある 。 
p jQuery を 使う と 、 ク ロス ブラ ウザ 問題 を 解消 する こと が で きる 。 


_E Hetcigdiee ccir 本 | 


Q⑳ ] ブラ ウザ に よっ て JavaScript の 実行 結果 が 異な る 問題 を な ん と 呼び ます 
か が か? 





ご 解答 は 巻末 に 掲載 
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し 衣 」Query の 利用 準備 


Ye 法 


jQuery を 利用 する に は 、 jQuery を 入手 し HTML フ ァイル に 読み 込む 必要 が 
あり ます 。 そ の 方 法 に は 次 の 2 種類 が あり ます 。 





@ 事 前 に jQuery (JJS ファ イル ) を ダウ ン ロ ー ド し て お き 、HTML ファ イル 
に 読み 込む 

@ JavaScript の 実行 の 際 に Google サー バー か ら jQuery ファ イル (.jS ファ 
イル ) を 直接 HTML ファ イル に 読み 込む 


以降 で 具体 的 な 手順 を 見 て いき まし ょ う 。 


⑳) 事前 に ダウ ン ロ ー ド し て HTML フ ァイル に 読み 込む 








jQuery は 、 以 下 か ら ダ ウン ロー ド で きま す 。 目 分 の パソ コン (ロー カル PCO) 
上 に ダウ ン ロ ー ド する こと で 、 オ フラ イン 環境 で も jQuery を 実行 する こと が で 
きま す 。 


httD://jqUery.COm/ 
0 ダウ ン ロ ー ド ボタ ン を クリ ッ ク し 、 さ ら に Downloading jQuery の |「Down 


load the compressed, production jQuery x.xxx」 を クリ ッ ク し ます (xxx に 
は jQuery の バー ジョ ン 番 号 が 入り ます )。 
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What is jOuery? Resources 





の jQuery の ソー スコ ー ド が 表示 され る の で 、 ブ ラウ ザ の 機能 で | 名 前 を 付け 
て 保存 ] し ます (Chrome の 場合 は 右 ク リッ ク し て [名 前 を 付け て 保存 ] を 
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保存 し た jQuery (jquery-x.x.x.minjs) を HTML フ ァイル に 読み 込み ます 。 


sm ダグ ウ ン ロ ー ド し た jQuery を 読み 込み 


< ご エエ 上 8 エ C=" 吉 UG エ Yー ベ メメ 。m1n . 8"></ BC エエ p キ > 
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リス ト 11.1 ダウ ン ロ ー ド し た jQuery の 読み 込み 


< !DOCTYPE html]> 
<htm1l lanqd="]a"> 
<head> 
<meta CharS8e ヒ = "ufF-8 リ "> 
< 上 1 上 1]e>JaVyaScCr1ip 上 の 練習 </ 上 1t 上 1e> 
<! - - ]Ouery の 読み 込み --> 
<8C て ユエ p 上 8rC="]UG エ Y-1 .9.1 .m1nm.]8"></ 8C エ エセ > 
</head> 
<DOdQY> 
</ body> 
</htm1 > 





Google の サー バー か ら 直 接 HTML ファ イル に 読み 込む 


ダウ ン ロ ー ド を し な く て も 、Google の サー バー 上 に 置い て ある jQuery を 直 
接 HTML フ ァイル に 読み 込ん で 利用 する こと も で きま す 。 こ の 方 法 を 使う と 、 
事前 に ダウ ン ロ ー ド する 方 法 よ り も ライ ブラ リ の 読み 込み 時 間 が 短く な る 可能 
性 が 高まり ます 。 








(OO0Ogle サー バー か が か ら 」Query を 読み 込む 


<8CY1p gro= "hp: //a]jax .doodleapis .Com/a]ax/11bs/ 列 
jquery/x.x.x/]query .m1n .]8"></ gc て 1p セ > 





x.x.x に は jQuery の バー ジョ ン 番 号 が 入り ます 。 


硬 記述 例 


<8Cr1pt gro="hEtp : / /a]ax .doog1eapgs .Com/a]ax/11jbs/ 兄 
]query/ 1 .9 .1/]query .m1n.]8"></ 8C て ミエ p セ > 


以上 、2 種 類 の うち の どちら か の 方 法 で jQuery を HTML フ ァイル に 読み 込 
み ま す 。 1 (用 ]Query を 使う 準備 が 整い ま し 。 
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コー ペデ キーマ ーッ アデ ャ 


EE 
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メ 





ぐ script> 要素 を 


に 


jQuery を 利用 する に は 、HTML ファ イル | 








使っ て 読み 込ん で お く 必 要 が ある 。 
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ご 解答 は 巻末 に 掲載 
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記 信 」Query プラ グイ ン 


%9) プラ グイ ン と は 


特定 の プロ グラ ム の 拡張 機能 を プラ グイ ン と 呼び ます 。 jQuery は さま ざま 
な メソ ッ ド を 持っ て いま す が 、 そ こ に プラ グイ ン を 組み 込む こと で 、 新 た な メ 
ソ ッ ド が 追加 され ます 。 jQuery に 組み 込む こと が で きる プラ グイ ン を jQuery 
プラ グイ ン と 呼び ます 。 jQuery プラ グイ ン を 利用 すれ ぱ ば 、 目 分 で プロ グラ ミン 
グ し な く て も 、 簡 単に リッ チ ( 高 機能 ) な Web サイ ト を 構築 で きま す 。 


IQuery 本 体 ' 









jQuery プラ グイ ン 


jQuery プラ グイ ン は 、 jQuery の 制作 者 以外 で も 自由 に 開発 し て 良い こと に 
な っ て いま す 。 現在 、 有 志 に よっ て た くさ ん の jQuery プラ グイ ン が 開発 され 、 
Web 上 に 公開 され て いま す 。Web 検 索 を すれ ば 使用 用 誠 に 応じ た プラ グイ ン 
が 容易 に 見 つか る で し ょ う 。 





%) プラ グイ ン の 使い 方 (LightBox 系 プラ グイ ン ) 


プラ グイ ン は 、 jQuery 本体 と 一 緒 に HTML に 読み 込ん で 利用 し ます 。 こ こ 
で は 、 定 番 の LightBox 系 プラ グイ ン を 例 と し て 、 プ ラグ イン の 使い 方 を 学び ま 
す も 

画像 を ポッ プア ッ プ 表示 し 、 背 景 を グレ ー ア ウト する プラ グイ ン を 総称 し て 
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「 ま ま ょ < さ = 
「 まで 上 WW は DI 
!W ーー WT WWIWIm 和 Lnnan Am TAN An4a 


LightBox 系 と 呼ん で いま す 。 そ の 中 で も 利用 方 法 が 簡単 な LightBox2 の 使い 方 
を 解 記 し ます 
LightBox2 は 、 以 下 か ら ダ ウン ロー ド で きま す 。 


http://Iokeshdhakar.Com/projectS/lightDox2/ 


ペー ジ 左 の DOWNLOAD を クリ ッ ク し 、 さ ら に Download の ボタ ン を クリ ッ 
ク す る と zip フ ァイル が ダウ ン ロ ー ド され ます 。 


還 Lynx : > 1 
を し を lokeshdhakar.com 


Liehtbox2 UEghtbox is a simple. unobtrusive scriDt used to overlay Images on top of 
by Lokesh Dhakar the current Dage. It's a snaD to SetuD and works on al modern browserS. 


| ネイ 1 。| ミコ 
Exqmples 


DOWNILO の AD に 
いう 、 二胡 り ] コ 
S り PPO の RT 


ルコ 





Iokeeshdihakar CorpColectsilghtbox2/ ォ GOwniopd 


LightBox ら の Web サ イト 


ダウ ン ロ ー ド し た zip フ ァイル を 解凍 し て 現われ た ファ イル 群 か ら 、 最 低 限 
必要 な 以下 の 4 つ を 、 次 図 の よう に 配置 し まし ょ う 


@ CSS/|ghtDOx.CSS 
@ mageS/|ogading.gif 
@ ImageS/CIOSe.Dng 


@ 」S/IightDOx.jS 


還 LightBox2 を 利用 する HTML ファ イル 






IIghtDOx.CSS 





ル ( U M - 
1 ば 3 MC に Nu 
oy 09 0 り AN U 


loading.gif 
Close.Dng 


ーー イー ブー 「 jQuery プラ グイ ン 
IightDoX.jS (ListBox2) 


ディ レク トリ 階層 図 


まず 、jQuery 本体 と 、lightbox.js、lightbox.css を それ ぞ れ HTML フ ァイル 
に 読み 込み ます 。 jQuery プラ グイ ン は 、 jQuery 本 体 の 後に 読み 込む よう に し 
て くだ さい 。 順番 が 逆 に な る と 、 エ ラー が 発生 する 可能 性 が あり ます 。 


<8oript gro="hEtp: //a]jax .doogleapis .Com/a]jax/11bs/ 列 
]query/1 .8.3/]query.m1n.]8"></goript> 

<gcript gro="]8/11qhtDbox . ] 8" ></ BC と 1p セ > 

<1ink re]="stylesheet" type="text/css" href="ocsg/11qhtDox .C88『 > 


続い て 、 サ ムネ イル 画像 を <a> タ グ で 囲み 、 拡 大 表示 する 画像 の URL、 画 


像 タイ トル を 指定 し ます 。rel 属 性 の 値 は 必ず 「lightBox」 に し ます 。 


<a href=" 画 像 の URL" tit1e=『 画 像 タイ トル " re1="11ightbox"> サ ムネ イル 画像 </a> 





jQuery 1 90 で 過去 の バー ジョ ン の メ ソ ツ ド が 大 幅 に 廃止 さ れ た た め 、 
。 jQuery1.9.0 の リリ ー ス 以前 に 作成 され た プラ グイ ン を 最新 バー ジョ ン の 
_ jQuery と 組み 合わ せる と 正常 に 動作 し な い 可 能 性 が あり ます 。 この サン プル 利 
_ 用 し て いる LightBox2 (vg.51) も jQuery1 .9.0 以降 の バー ジョ ン に 対応 し て 
ル いま せん 。 その た め 、 この サン プル で は jQuery 1 8. 3 を 利用 し て いま す 。 
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NNW 回 回 " ER kW Ai も 先生 
の OU) が か の すす] 還 - 由 層 車庫 市 ま ず が あお WWT や SIMONTTYN ギ ポル そま へ W す WNWFE や で ボボ か WWWNNMNY マ WNWWNW ギ や ゃ や WNWWELWNPmNNP ま ず 二 WWWMNNY ま も ホホ WNWSNMWWWM ま wWWMWMN ホ ANWWMNWMVMwNWNNY や NNNWW 昌 4 な NNWWMFAY ギ wiW ず 
4 YY が WYYA ir ソ ツ 7) 柱 衝 る 粗 開 料 Hr は も いす かい YAYNyh 7 たい かせ た ャ > 人 rtA か rt せ 100274roA み yh th ty か YK は 4P0 ん 4 し Er 催 

W S ま も _ ョ ョ や 立 3 チチ - ー s ( 抹 光 二 4 症 燈 まめ まず キ ギ パ WWWWWWGJYWW ル WWWUWWMANWMW す で NAMLWMYWNMYVtONAYWWYNWWWFKYYWNMANNWN よ WMWWWNWWWWWWYWw お ツマ ポ YWWWWYNYW ル KM wwWMMWW ル Na N ず ャ WNWYN キ 4WTWWNwNWwNhw キ ytWAWAN キ mW 
人 MELKKKYOGYN 第 董 JNNU ピ 1 Y レン に - RE が AA 9100 で 0Y0tDYY ひ CN TARGET CO が UTU VPI 4446Ye YR AOTS 


リス ト 11.2 LightBox ら の 利用 


< !DOCTYPE htm」> 
<html land="]a"> 

<head> 

<meta CharSe ヒ ="utE-8"> 

< 上 1 上 1]e>JavaSCr1p 上 の 練習 < / 上 1t1e> 

<! - - ]Ouery の 読み 込み --> 

<8C エ ip 上 gro="hEEp: //a]ax .doogleapis .com/a]ax/1ibs/ 凡 
] quUerY/ 1 . 8 .3/]query .m1n.]S8 "></ 8C エ 1p セ 上 > 

<!- - LightBox2 の 読み 込み --> 

く 8C エ 1p 上 上 groC="]8/]1qghtDbox . ] 8 "></ 8C エ 1p セ 上 > 

<11nK re]="stylesheet" tyDe="text/csg" href=ocsg/ 同 
11qghtDbox . CS8 "> 

</head> 

<DOdQY> 

<a href="1mages/fFrod1 . pd" tit1e=" リ マル メタ ビオ カ ガ エ ル " 同 
ずら GL=『 エ ュ 1GhEDOX『 > 

<1md SrC="1magde8/fFrod1 . pd" w1dth="20 も を " height="20 も "> 

</a> 

</ body> 
</htm1] > 





琴 実 行 結果 (画像 クリ ッ ク 後 ) 


| ] JavaScript の 練 吾 
と う @ 口 fle:///C:/workylistt1 2html 。 避 
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11.3 jQuery プラ グイ ン 


vwvl| ず 中 目 目 7 用 W 目 ! 有 上 上 T 目 f 


jQuery や その プラ グイ ン に は 、 さ まぐ ざま な 種類 の オー プン ソー スラ イセ ンス が 
設定 され て いま す 。 オ ー プ ン ソ ー ス ライ セン ス は 一 部 を 除き 全般 的 に 次 の 特徴 を 
持っ て いま す 。 





・ 無 保証 で ある 
・ 商 用 利用 、 ソ ー ス 改変 、 再 問 布 が 可能 


各 ラ イセ ンス に は それ ぞ れ 遵守 すべ き ル ー ル が 細か く 定 め ら れ て いま す 。 既存 
の jQuery プラ グイ ン に 少し 手 を 加え て カス タマ イズ し た い 場 合 な ど に は 、 必 ず 
その プラ グイ ン の ライ セン ス を 確認 し まし ょ う 。 こ こ で は 代表 的 な オー プン ソー 
スラ イセ ンス を 紹介 し ます 。 


人 @ BSD License 
他 の オー プン ソー スラ イセ ンス より も 、 比 較 的 制限 の ゆる い ラ イセ ンス で す 。 
著作 権 表示 が 義務 付け られ て いま す 。 


。 天 MIT License (X11) 
BSD と 同様 に 制限 が ゆる く 、 著 作 権 表示 が 義務 付け られ た ライ セン ス で す 。 
jQuery 本体 は MIT License で す 。 


。 @GNU General Public License (GPL) 
感染 性 の ライ セン ス で す 。 感染 性 と は 、GPL ラ イセ ンス の ソフ トウ ェ ア を 元 に 
| 新た な ソフ トウ ェ ア を 作成 し た 場合 、 そ の 新た な ソフ トウ ェ ア も GPL ライ セン スズ 
を 引き 継ぐ 、 と いう 性 質 で す 。GPL ラ イセ ンス の ライ ブラ リ や プラ グイ ン を カス 
タマ イズ する 場合 は 必ず この 制約 を 守り まし ょ う 。 


人 欠 Creative Commons License (CC) 


4 種類 の 項目 を 組み 合わ せ て 、6 段 階 の 制限 を 付け る こと が で きる 特殊 な ライ 
セン ス で す 。LightBox ら は この ライ セン ズ で す 。 
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概要 
商用 利用 は 禁止 
ソー ス の 改変 は 禁止 
改変 元 の CC ライ セン ス を 引き 継ぐ 








Attribution (BY) 
Noncommercial (NC) 
No Derivative Works (ND) 
Share Alike (SA) 











これ ら 4 項 目 を 組み 合わ せ て ライ セン ス の 条件 を 決定 し ます 。 組み 合わ せ パ 
ター ン は 次 の 6 種類 で す 。 


・ BY ( 閉 作 権 表示 必須 ) 

・BY-NC (著作 権 表 示 必 須 、 商 用 利用 禁止 ) 

・BY-ND (著作 権 表 示 必 須 、 ソ ー ス 改変 禁止 ) 

・BY-SA (著作 権 表 示 必 須 、CC ラ イセ ンス を 引き 継ぐ ) 

・BY-NC-ND (著作 権 表 示 必 須 、 商 用 利用 禁止 、 ソ ー ス 改変 禁止 ) 
・BY-NC-SA (著作 権 表 示 必須 、 商 用 利用 禁止 、CC ラ イセ ンス を 引き 継ぐ ) 


この 章 の 到達 度 チ ェ ッ ク 


⑳ 1 画像 を ポッ プア ッ プ 表示 し 、 背 景 を グレ ー ア ウト する jQuery プラ グイ ン 


を 総称 し て な ん と 呼び ます か ? 


⑳2 る ⑳ 「scripts」 ディ レク トリ の 中 の jquery-1.9.1.min.jJS を HTML ファ イル 
に 読み 込ん で 利用 する 場合 、 ご の よう な タグ を 記述 すれ ば 良い で すか ? 





っ 解答 は 巻末 に 掲載 


jQuery の 文法 





フィ ル タ 
属性 の 次 更 
イベ ント の 設 
要素 の 挿入 









人 Y さ か か TCSY 和 キャッ 江 


いす も WW な FM YY ft 村人 HH りす wi 本 者 人 注 導 和 DOES た tt る もの サル ネ Le かれ) 人 My 義和 人 YY キャ 
EMMANuuM YA も よん 相 か みか も れ び の dy ル な も あい 仙人 かい NF ik riy か すみ る it herW MWL 上 ツル MWT キル ・ 
時 株 は 村 寺 相 182 人 BBH 級 20208023020633 人 0 000042823043 NINE2A20020 
愉 旧 ポ IM TB YA | 9* 八 ub. 4 vn ui 4 AA は 、 erA tg vu り ed: AL ty ん ルル MA OAM 「 介 『 Muuiuiu いも 4 【 Ak。 uuduiuiiuMJMI MA * 


CK キテ WMw さ や 
PV の: 頑 
1 9 7 ワリ 『 疹 > 4W 
れ # JMAMWIJR MA 4 


YA Le 
間 1 の 。 届 


科 
WNW 


人 @ jQuery を 使う と DOM 操 作 が と っ て も 簡単 依 


jQuery な ら 、 狙っ た 要素 を 手軽 に 取得 で きま す 
DOM に よる 要素 の 取得 が 
簡単 に で きま す 


ある 要素 か ら 見 た 相対 位置 を すべ て の 要素 に 対し て 
指定 し て 取得 する 方 法 も あり ます | まとめ て 処理 を 実行 する こと も 。 


で きま す 
ma 
『 
お 
(」 
aa の 
5 。 
っ る 移 
取 7 
ar 
『 1 





jQuery が 持つ 主 な 機能 は 、 高 度 な は DOM 操作 で す 。 複雑 な DOM 操 作 も 、 
jQuery を 利用 すれ ば 簡潔 に 記述 で きま す 。 本章 で 、 セ レク タ や フィ ル タ な 
ご ど 、 要 素 を 取得 する さま ざま お 方 法 を 学び まし ょ よう 。 
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周 jQuery の 基本 の 書き 方 





ーー テー ド 


jQuery の コー ド は 、ready と いう メソ ッ ド を 使っ て 次 の 形式 で 記述 し ます 。 





る uery の コー ド 記 述 
$ (document) .ready(Eunotion() { 


} ) 


// ここ に }jQuery の コー ド を 記述 





ready メ ソ ッ ド は 、HTML タ グ が 解析 され 、DOM が 利用 可能 に な っ た タイ 
ミン グ で 実行 され ます 。 load イベ ント の 実行 タイ ミン グ と 似 て いま す が 、 わ ず 
か に 異な り ま す 。 load イベ ント は プラ ウザ に よっ て 実行 きれ る タイ ミン グ に 差 
が あり 、 一 部 の ブラ ウザ で は 画像 な どの デー タ が すべ て ダウ ン ロ ー ド され た 後 
で 実行 きれ ます 。 し た が っ て 、 大 きい 画像 デー タ が た くさ ん 配置 る され た Web 
ペー ジ で は 、load イベント の 発生 が か な り 遅 く な る 可能 性 が あり ます 。 ま と め 
る と 表 12.1 の よう に な り ま す 。 


表 12.1 ペー ジ を 開い た と き の 実 行 順序 









実行 順 記述 方 法 実行 タイ ミン グ 









イベ ント を 設定 せ ず | < く script> 要素 が 読み 込ま れ た と き 。 ぐ body> 
RE ま 記 述 要素 が 読み 込ま れる 前 


2 mw メチ PL 4 人 DOM が RI 全 に な っ 


の 


よっ て 、ready メ ソ ッ ド の タイ ミン グ は スク リプ ト の 実行 に 最適 で ある と 言 
上 ます o 





た と き 
HTML タグ が 解析 され 、 DOM が 利用 可能 に な っ 
た と き 。 一 部 ブラ ウザ で は 、 全 画像 デー タ の タダ 
ウン ロー ド が 終わ っ た 後 
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・ ーWWNW で WNW キ W た WM チキ wwW ル も を mWwrw キ キネ で ヤル MK で mlW WiW Sa ギ ル W 本 梨 かせ PE WAN ょ WiwWe で WW を キル WWWWn ネギ ポ WWNMINEWWWMMPWWW パ キナ WNWYIWW ポ ネ WW まず WW 雪 で や MTSWAWW キ SW WNW キキ WW W ま や WW 本 
YK すま ttaN 才 いる ひひ すら て せま よん サド ももか ト で る すす いす ひも イト は 4trM4 つ て リト 0 は St41447 す かゆ ル 4 せ は 4 すい か は より 4 て 4 は で ht か 9 人 ト tr で ャ ht4 を いい は も で すす 4 ル の は で ト に は サド ャ トッ 
直す AM ーー 生 8 ど OPNM すす せき チア が WewWUeWWWNeW ぞ bwNAWNWMWWWNW 和 W ま 放 作 WW 還 mNWw ネ MANNNW や 人 基 W や WW や を パチ We や mmTWVWWW ま mwWWAPWYmW ヤ AMW ず ず ヤ キル リル 電 WNW ネ リヤ あす ル か YY や WNWT 導 キ NW ず YWAwr パ WW まず ず ず オオ ィ wmww ヤ ルキ テイ WW ボキ ザイ W 洛 も たか や ん 
ん いす も か ル か すか 4 'yJL 1 4 サチ YY ETWYVPO Phi ひで の TO ぜ て ETWYVUEUKPUCNWVASAILLMSAAALAALAALLIMMBLLNASS2JMJLERLAMUUMAAALLSALALLLIASAAAMLLAAAALLSJSALAANeSAAJMLIMKSMbJIAIMMLAALUMSMMSALLIANMuuNuMIMDduLBuMU MAMI 
kk い ルル いい 條 ル ( WW AT 7 生生 で 生 全 夫 科 け 人 PU か DID ひか の 人 かかり を YY*YWW ポ WW よ パ NMMWWOWNNM ま WWWNAWWWeNNMNNWMWWMEW や YANW4NAWwWwNWANWVNNNNNWVWWNANWWWNAWNNNKMMNWNAWWWW や を 4 衝 MWWAMMMW NWWWNWWMWNYYWWWWNNWN4MWANNWWWMWWWNf 生 
WWWWNAN WT 


ready メソッド load イベ ント 






<htm ユ > 





<1md 8rC="a.]pP す "> 


<1mqd 8BrC="a.]pP9 す "> 


</htm1> </htm1 > 





⑩ HTML 解 析 ⑩ HTML 解析 
9 スク リプ ト 実 行 の ② 画像 ダウ ン ロ ー ド 
⑥ スク リプ ト 実 行 


ready メソッド と load イベ ント の 実行 タカ イミ ング 


ready メ ソ ッ ド を 使っ た 記述 方 法 は 長い の で 、 次 の よう に 省略 し て 記述 する 
こと が 可能 と な っ て いま す 。 


eS jQuery の コー ド 記 述 ぬ 


$(Eunction() { 
// ここ に ]}Query の コー ド を 記述 





_E Hetsidkee Mesh 本 | 





Q 1 jQuery の ready メ ソ ッ ド が 実行 され る タイ ミン グ は いつ で すか ? 
⑳ る ⑳ ready メ ソ ッ ド の 省略 形 は どの よう に 記述 し ます か ? 





ご 解答 は 巻末 に 掲載 
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9 要素 の 取得 


jQuery が 持つ 主 な 機能 は 、 高 度 な DOM 操作 で す 。 jQuery に よる DOM 操作 
は 、 次 の 手順 で 行ない ます 。DOM 要素 の 取得 は 、 セ レク タ を 使っ て 行ない ます 。 


1. セ レク タ で 要素 を 取得 
2 取得 し た 要素 に 対し て メソ ッ ド を 実行 


これ を 言い 換え る と 、 


1. ど の 要素 に 対し て 
2. ど ん な 処理 を 行なう か 


と いう こと に な り ま す 。 


DOM 操 作 の 基本 書式 
る (5 セレ タタ *) 。 メ ソ ッ ド 6) )』 






基本 的 な セレ クタ は 、 表 12.2 の 5 つ で す 。 


表 12.2 大 本 の セレ クタ 






名 前 まっ SE 


要素 セレ クタ 指定 され た タグ 名 の 要素 を 取得 する 


YY 


ID セレ クタ | #TD 属 性 値 。  。 指定 され た ID 属性 値 を 持つ 要素 を 取得 する 


指定 され た CSS クラ ス 名 を 持つ 要素 を 取得 する 


2 | すべ て の 要素 を 取得 する 
グル ー プ セレ クタ 












セレ クタ 1, セ レク タ 2 … 


複数 の セレ クタ の うち いずれ か に 該当 する 要素 
を 取得 する 
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jQuery の セレ クタ は 、CSS の 記述 方 法 に 準拠 し て いま す 。 それぞれ の セレ ク 
タ の 詳し い 挙 動 に つい て は 、 第 2 章 を 参照 し て くだ さい 。 こ こ で は ID セレ クタ 
を 利用 し た DOM 操作 を 紹介 し ます 。 


リス ト 12.1 ID セレ クタ の 利用 


<!DOCTYPE html> 
<htm] 1]anqg="]a リ "> 
<head> 
< 上 1 上 1]e>JaVaSCr1p 上 の 練習 </ 上 1 上 1e> 
<meta Char8et="utfF-8 リ "> 
<8Cr1pt gro= "hp : / /a]ax .doodleap1s .Com/a]ax/11bs/ 同 
]query/ 1 .9 .1/]query .m1n .]8 "></ 8C エ 1p セ > 
く 8C エ 1p ヒ > 
$(Eunction() { 
$ ( "#msd") 。ogg("Font-81ze"。 "30px") 』 
7 ) 
< く / 8C エ 1p セ > 
</head> 
<DOQY> 
<p 1d="msd"> こ ん に ち は </p> 
</ body> 
</htm1 > 





時 実行 結果 


| ) JavaScript の 練習 X 


《%- っ @ fle:///C:/work/list12_1.html 


こん に ち は 





リス ト 12.1 は 、msg と いう ID を 持つ 要素 を 取得 し 、 ス タイ ル を 変更 する ス 
クリ プ ト で す 。 

css メ ソ ッ ド は 、 有 要素 に スタ イル を 適用 し ます 。 セ レク タ で 取得 し た 要素 が 
複数 件 ある 場合 、 す べ て の 要素 に 対し て スタ イル を 設定 し ます 。 第 2 引数 を 省 
略し た 場合 は 、 指 定 し た CSS プロ パテ ィ に 現在 設定 され て いる 値 を 返し ます 。 
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sw スタ イル の 変更 
要素 .cas ("CSS プ ロ パ ティ 名 『, 『 値 『) 






ao スタ イル の 取得 


要素 .cas ("CSS プ ロ パ ティ 名 『) 』 


リス ト 12.1 は 、「msg」 と いう ID を 持つ 要素 の フォ ント サイ ズ を 30px に 設定 
し て いま す 。 

基本 の セレ クタ の うち 、 最 も 速く 要素 を 検索 で きる の は ID セレ クタ で す 。 
よっ て 、 頻 筐 に アク セス する 要素 に は ID を 設定 し て お く と 良い で し ょ う 。 


ンー 一 
以降 の サン プル コー ド で は 、 ぐ body> 要素 と yosdohAt (《( け スト 12.† の 
網 掛 け 部 分 ) を 中 心 に 掲載 し ます 。 1 


2)) 階層 セレ クタ 


続い て 、 基 本 セレ クタ を 組み 合わ せ て より 細か く 要 素 を 指定 する 、4 種 類 の 
階層 セレ クタ を 紹介 し ます 。「<div> タ グ の 中 の <img> タ グ に の み ス タイ ル を 
適用 し た い | な ど 、 あ る 要素 を 基準 と し て きら に 要素 を 絞り 込む 場合 に 利用 し 
ます 。 








表 12.3 階層 セレ クタ ター 覧 








名 前 書式 対象 
2 ーー ーー ーー > に が 半 訂 ーー を 取得 する 






了 接 セレ 1 | 前 要素 . + 後 本 ーー ャ onrrmerーー ロ ーー イロ 


間接 セレ クタ | 前 要素 - 兄弟 要素 | 前 要素 以降 に 現われ る 兄弟 要素 を 取得 する 





階層 セレ クタ を 記述 する と き 、 そ れ ぞ れ の 要素 を 示す セレ クタ は どの よう な 
組み 合わ せ で も か まい ませ ん 。 た と えば 、 親 要素 は ID セレ クタ で 指定 し 、 子 妥 
素 は クラ ス セ レク タ で 指定 する 、 と いっ た 形式 も 可能 で す 。 
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い "We * で も 。 EE ャ ネ デ と) まず.W 放電 キル キャ ず まま ぶ 4 ゴ W や の D 


ャ ザヤ ギド WNWNY WWTW 
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K3 子 セ レク タ 、 子孫 セレ クタ 

子 セ モレ クタ と 子孫 セレ クタ は 、 あ る 要素 の 中 に 含ま れる 要素 を 絞り 込み 検索 
する セレ クタ で す 。 

子 セ レク タ の 利用 例 を 見 て み ま し ょ う 。 


リス ト 12.2 子 セ レク タ の 利用 
HTML (<body> 要素 内 の み 抜 粋 ) 


<d1V 1d= "Darent "> 
<p> 段 沙 1 </p> 
<d1 ざ > 


<D> 段 落 2</p> 
</d1 び > 
</d1 ざ > 





JavaScCript 


$(Eunction() { 
$("#parent > Dp") 。cgg("FEont-81ze", "30pxX") 』 
)) 7 





画 実 行 結果 


と う で fle:///C:/wort7list12_2.html 





リス ト 122 で は 、「parent」 と いう ID を 持つ 要素 の 子 要 素 う ち 、<p> 要素 
に 対し て スタ イル を 適用 し て いま す 。 次 の リス ト を 見 て くだ さい 。 子 要 素 1 は 
<p> 要素 な の で セレ クタ の 対象 で す が 、 子 要素 2 は <div> 要素 な の で 対象 に な 
り ま せん 。 ま た 、 子 要素 2 の 中 の <p> 要素 は 孫 要 素 な の で 、 こ ちら も 対象 に は 
な り ま せん 。 


子 要 素 と 採 尻 素 


<dd1 ざ 1d= "parent "> 










<d1 マ > 
<p> 段 落 2</p> 
</d1 ざ > 
</d1i> 


子孫 セレ クタ の 場合 は 、 係 以下 の 要素 も 対象 と な り ま す 。 リ スト 12.2 の セレ 
クタ か ら 「>」| を 削除 し て 実行 し て みて くだ さい 。 


リス ト 12.3 子孫 セレ クタ の 利用 


$( "#parent Dp") .cgg("Eont-g1ze", "30px") 2: 


実 行 結果 


| ) 〕avaScript の 和 習 
< っ @G [fle:///C:/work/list12.3.html 


段落 1 
段落 2 





「parent」 と いう ID を 持つ 要素 内 の <p> 要素 すべ て に スタ イル が 適用 きれ ま 
に し の 。 


<Qd1iV 1d= "parent "> 
子 要素 


<d1> 





</d1 ざ > 


3 階層 セレ クタ 、 間 接 セ レク タ | 

隣接 セレ クタ 、 間 接 セ レク タ は と も に 同じ 階層 に 存在 する 兄弟 要素 を 得る セ 
レク タ で す 。 隣接 セレ クタ は 次 の 見 弟 要 素 を 1 件 、 間 接 セ レク タ は 以降 に 現 わ 
れる 兄弟 要素 を すべ て 取得 し ます 。 
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リス ト 12.4 隣接 セレ クタ の 利用 
HTML (<body> 要素 内 の み 抜 粋 ) 


<p> ヘ ッ ダ </p> 
<a href="prev .htm1 "> 前 ペー ジ へ </a> 
<a href="next .htm1 "> 次 ペー ジ へ </a> 


<a hrefF="1ndex .htm1 ">TOP へ </a> 
</D> 





JavaScript 


$ (function() { 
$("p + a") .cgg("font-size", "30px") : 


)) 





画 実行 結果 


|  〕JavaScript の 練 
を ゥ @ htle:/C:/worlist12_4.html 。 。 議 





リス ト 12.4 は 、<p> 要素 の 次 に 現われ る <a> 要素 に 対し て スタ イル を 適用 し 
て いま す 。 隣接 セレ クタ が 取得 する 要素 は 、 前 要素 の 直後 に 現われ る 要素 だ け 
で す 。「 次 ペー ジ へ 」 リン ク の 直前 は <a> 要素 な の で 対象 外 で す 。 ま た 、「TOP 
へ | リンク は <p> 要 素 の 兄弟 要素 で は な く 子 要素 な の で 、 こ れ も 対 象 外 と な り 
ます 。 








ぐ p> の 直後 に 出現 
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リス ト 12.5 間接 セレ クタ の 利用 
HTML (< く body> 要素 内 の み 抜 粋 ) 


<p> ヘ ッ ダ </p> 
<a href="prev . htm1 "> 前 ペー ジ へ </a> 
<a href="next .htm1 "> 次 ペー ジヘ へ </a> 


<a href= "index .htm1 ">TOP へ < /a> 
</p> 





JavaScript 


$ (Eunction() { 
$("p - a") .cgg("font-g1ze", "30pxX"): 
}) 7 


| ] JavaScript の 繧 制 
を う @ ロ fle:///C:/work/list12_5.html 。 





リス ト 125 は 、<p> 要素 以降 に 現れ る <a> 要素 すべ て に 対し て スタ イル を 適 
用 し て いま す 。「TOP へ 」 リ ンク は <p> 要素 の 兄弟 要素 で は な く 子 要素 な の で 、 
対象 外 と な り ま す 。 
<p> ヘ ッ ダ </ や > 


<a href= "preV .htm1" > 前 ペー ジヘ へ < > 027 
<a href="next .htm1 "> 次 ペー ジ へ </a> 












ぐ p> 以降 に 出現 
ぐ p> 以降 に 出現 








py jQuery の セレ クタ は 、CSS の セレ クタ と 同じ 記述 方 法 で 指定 す 
る こと が で きる 。 
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還 Oheck 更 est 


Q1 以下 は 、<div> 要素 の 中 の すべ て の < く p> 要素 の 文字 色 を 赤 に 変更 する ス 
クリ プ ト で す 。 空欄 を 埋め て 完成 させ な さい 。 


$ MM っ 問 .C88 ( CO1OY" が Wed" ) : 


⑳ る ⑳ 以下 は 、<div> 要素 の 中 の すべ て の 子 要素 の 文字 色 を 赤 に 変更 する スク 
リプ ト で す 。 空欄 を 埋め て 完成 させ な さい 。 


S (中 | .C88( "Color", "red") 





ご 解答 は 巻末 に 掲載 
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< 信 要素 の 抽出 






⑨ っ ru 


フィ ル タ は 、 セ レク タ で 取得 し た 要素 に 対し て 特定 条件 に よる 絞り 込み を 行 
な う 機 能 で す 。 セ レク タ だ け で は 表現 で き な い 、 よ り 細 や か な 条件 で 要素 を 取 
得する 場合 に 使い ます 。 セ レク タ で 取得 し た 要素 を フィ ル タ に か ける こと で 、 
より 複雑 な 条件 に よる 要素 の 抽出 が 可能 と な り ま す 。 フ ィ ル タ を 利用 すれ ば 、 リ 
スト の 背景 色 を 1 行 お き に 変更 し た り 、 選 択 状態 に な っ て いる 有 要素 を 強調 表示 
し た り と いっ た スク リプ ト を 簡単 に 記述 で きま す 。 セ レク タ で 取得 し た 要素 を 
フィ ル タ に か ける こと で 、 よ り 複 雑 な 条件 に よる 要素 の 抽出 が 可能 と な り ま す 。 

フィ ル タ は 、 セ レク タ の 後ろ に 続け て 記述 し ます 。 





se ソイル タタ 


$(m セ レク タフ ィ ル タ \W) 。 メ ソ ッ ド () 


表 124 は 、 主 な フィ ル タ で す 。 以降 で 使い 方 を 見 て いき まし ょ う 。 


表 12.4 フィ ル タ 一 覧 











フィ ル タ GE 


天 の 表 を 介する 












人 ( 文字 列 ) " 







0 科 全 0 | ラジ オ ボ タ ン や チェ ッ ク ボ ックス の 中 で 、 チ ェ ッ ク が 入っ て いる 要素 
: ご ロ GC 人 KG を 取得 する 
[ 属性 名 = 値 ] ) 指定 し た 属性 値 を 持 つ 要 素 を 取得 する 
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び か まき コミ 和 ま 。 _ 
内 ト N . ド wmw パ ma - 
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K3 :first フ ィ ル タ 、:last フ ィ ル タ 
セレ クタ が 示す 要素 の 中 で 、 先 頭 プ 末尾 の 要素 を 取得 し ます 。 


リス ト 18.6 先頭 要素 の 取得 
HTML (<body> 要素 内 の み 抜粋 ) 


くい] 1d=『F エ い ロ ュ ユヒ 8『> 
<]1i> り ん ご </11> 
<] > みか ん </1 ユ > 


<]1i> い ちご </11> 

< は よっ > が どう ェ / ユゥ > 

<]1> い よ か ん </1 ユ > 
</u] > 





JavaSCript 


$ (function() { 
$(" 后 Fru1tg > 11i:fFirgt リ ") 。cgg ("backqground-Color",。 "red") 


}) 


一 実行 結果 





| JavaScript の 練 吾 が 
< っ @ tc77G/vorviai2-ehm = = 


ERRENCCISATETERYRETNPTSPEY PREIEEPEYS PPP KERATKTAYPATAP 7 





リス ト 12.6 は 、|fruits」 と いう ID を 持つ 要素 の 子 要素 で ある <lji> 要素 の 中 で 、 
一 番 先 頭 に あたる 要素 に スタ イル を 適用 し て いま す 。 結果 、| りん ご 」 を 内 容 と 
し て 持つ <ji> 要素 の 背景 色 の み が 変 更 さ きれ て いま す 。 


$("#Fru1t8 > 1]1:fFirgt") 。cgg( "backqround-cColor" 。 "red") 』 


⑩ ID が 「fruits」 の 要素 を 親 と し て 持つ  @ セレ クタ で 取得 し た く |> 要素 の うち 
く I| ウ 要素 を すべ て 取得 する 先頭 の 要素 を 抽出 する 


要素 の 絞り 込み 





続け て 、 ス クリ プ ト を 一 部 変更 し て その 他 の フィ ル タ に よる 効果 も 見 て み ま 
し . ま 。 


リス ト 127 で は 、 セ レク タ で 取得 し た 要素 の うち 未 尾 の 要素 に 対し て スタ イ 
ル を 適用 し て いま す 。 


リス ト 1 ら .7 末尾 要素 の 取得 


$(Eunotion() { 


$ ("fruitg > 1]1slast") .cgg( "background-CO1OY『"/ 


}) : 


同 実 行 結果 


JavaScript の 練習 4 


人  G [file:///C:/work/list12_7.html 





K3 :even フィ ル タ 、:odd フィ ル タ 


L red" ) : 





セレ クタ が 示す 要素 の うち 、 偶 数 番目 奇数 番目 の 要素 を 取得 し ます 。 
リス ト 128 で は セレ クタ で 取得 し た 要素 の うち 偶数 番目 の 要素 に の み ス タイ 
ル を 適用 し て いま す 。 ま た 、 リ スト 129 で は 奇数 番 日 の 要素 を 対象 と し て いま 


す 。 先頭 の 要素 を 0 番目 と し て 数 え 始 め る こと に 注意 し まし ょ う 。 


リス ト 12.8 偶数 番目 (0、 ら 、4 番 目 ) の 要素 の 取得 
$ (Eunotion() { 


})) 


$("#Fruits > 1]1:even'" ) .cgg ("background-CO1O エ リ , 


財 実 行 結果 


) JavaScript の 繧 青 
Eu Ye77SrearynP 基 PT ーーーー…ーーーーーーーーーーーーーー 


ーーーーーーーーー~… ーーーーー ーー ーーー テ ーーーーー・ ーーーーー ニ ーー ーー ニー ニニ ーーー ニーーーーーーーーーーーーーーーーーーーーーーーーーーーー-ーーーーーーー…ーーーーーーーーーーーーーー 





ed " ) 2 
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リス ト 1 ら .9 奇数 番目 (1、3 番 目 ) の 要素 の 取得 
$ (function() { 
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$(" 持 Fru1tg8 > 11:odd") .cgg ("backqround-Col1or" , "red") 


}) : 
層 実 行 結果 





[" JavaScript の 綾 習 
4 う @ [file:///C:/work/list12_9.html 


es りん 人 ご 
e 
@ いち て 


すす 
e いよ が 





K3 :contains フィ ル タ 
セレ クタ が 示す 要素 の うち 、 検 索 文字 列 を 含む 要素 を 取得 し ます 。 検索 文字 
列 は フィ ル タ の 引数 と し て 指定 し ます 。 


リス ト 12.10 指定 文字 列 を 芝 む 要素 の 取得 


$ (Eunction() { 
$( "Fruitg > 1]1:cContaing (! か ん ! ) " ) .csg ("background - 同 
COLOY り 。 "reQd『 ) ぅ 


)) : 





還 実 行 結果 


| ) JavaScript の 練 玉 
を うっ @G 





K3 :not フ ィ ル タ 

セレ クタ が 示す 要素 の うち 、 指 定 し た 条件 に 該当 し な い 要 素 を 取得 し ます 。 
引数 と し て 除外 要素 を 表す セレ クタ や フィ ル タ を 指定 し ます 。 

リス ト 12.11 で は 、 セ レク タ で 取得 し た <li> 要素 の うち 先頭 要素 の み を 除外 
し て スタ イル を 適用 し て いま す 。 





リス ト 1 ら .11 除外 検索 


$(Eunction() { 
$("#Fruitgs > 1]1i:not (:firs ) " ) .cgg (background-cColor", "red") 
)) 7 


画 実 行 結果 





| JavaScript の 練 吾 
て っ の 、 fle: 7//C: /worklist12_1 11. Lhtm ーー 


es り A こ 





3 :eq フィルタ 
セレ クタ が 示す 要素 の うち 、 指 定 し た イン デック ス を 持つ 要素 を 取得 し ま 
す 。 イ ン デ ックス は 配列 と 同じ よう に 0 番目 か ら 始 まり ます 。 


@ り ん ご 一 一 一 テ 0 番目 
@ み か ん 一 * 1 番目 
@ い ちご 一 一 一 と * 2 番目 
@ ぶ どう 。 一 一 一 テ 3 番目 


@ い よ か ん 一 一 一 一 w- 4 番目 


リス ト 12.1 ら イン デック ス を 指定 し た 要素 の 取得 


$ (funoction() { 


$("#Eru1t8 > 11:eq(2) ") .Cgg( "Dackdround - co1or",。 "red") : 


}) 


時 実行 結果 





内 Me 
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IN せ 1 > * 1 WM ポキ 旧 ww =ー ル で Wa ww - _- N ザ WWwW パ や まず ・ N _- NN ネネ ポリ ャ ホネ オイ WW ポ w ず サポ we ュ ま W 4 「 ド ボ ポル ミネ < s W ず PF ま 誕 訂 

_- WW W 還 NM WW we ネ = cm デ M で すま まま ィ 上 表 *w L ポ MIN の PE 1 WWwwNFN ザ WW ギ ポ WM あ ポ あぁ CR 到 ) W 3 wa WW さき ギ キ \W\ ャ 4 - で 
WM WWW あま ホ ド - * ・ うま もげ と PD _ _- WM WW WNW ・ | ャ や \ キ wt WW が # WWww ャ っ _- _- - ト が ず - か の か の MO 
Py ゆか の ゆい が SS まま ョ 挟 . き ポ 日 ま 。 N 「E ま 由 . PE _- 内 6 W WW WM 4 W オド ANWWRNN LE ・ * り 較 症 _- か AM NM W』 
IE 還 症 還 。 一 詳 半 "1 。 生 - - 生 隊 陣 ま JNNmnd wm を - ず 1 - Ln hwWANWW ENENIRERRASNTIM。 WW _- 上 - * WNW キキ ポ キャ まき - 「 _- - が e NPD か 


3 属性 フィ ル タ 

セレ クタ が 示す 要素 の うち 、 指 定 し た 属性 名 と 属性 値 を 持つ 要素 を 取得 し ま 
す 。 name 属性 や <input> 要素 の type 属性 な ど に よく 使わ れ ま す 。 

リス ト 12.13 で は 、<input> タグ の うち name 属 性 に 「tell が 設定 され て いる 
要素 に スタ イル を 設定 し て いま す 。 


リス ト 12.13 属性 フィ ル タ の 利用 
HTML (<body> 要素 内 の み 抜 粋 ) 


<U い > 
<11> 名 前 (漢字 ) <1nput type="text! name="kan]1"></]1> 
<11> 名 前 (カナ ) <input type="text! name="kana"></ ユ 1> 


<11i > 住所 <1nput type="text" name="addre88"></ ユ ユ > 
<]i> 電 話 番号 <1nput type="text" name= "te1 "></]1> 

<]1i> メ ー ル アド レス <input type="text" name="ema11 "></ ユ 1> 
</u]> 





JaVvaSCript 


$(Eunction() { 
$ ("input [name= 'te1 '] ") .cgg ( "backqround-Co1or" , "red")』 


}) 


一 実行 結果 





| JavaScript の 緒 
を っ G Bte77Gomtet2tahom。。、。 宮 


ーーーー ーー ニーーー ペ ヘー 


名 前 (漢字 )| 。 


・ る 前 の 
・ 5 


e メー ル ア ド レス | ーー 





2)) 要素 の 絞り 込み 


続い て は 、 あ る 要素 群 か ら 条件 を 指定 し て 要素 を 絞り 込む 方 法 を 紹介 し ま 
す 。 

た と えば 、「 リ スト が 持つ 子 要素 すべ て の 背景 色 を 変更 し 、 さ ら に 奇数 番目 
の 要素 は 文字 色 も 変更 し た い 」 と いっ た 場合 、 今 まで に 学習 し た 記述 方 法 だ と 
次 の よう な スク リプ ト に な り ま す 。 
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リス ト 1 ら .14 要素 に 対し て 複数 回 スタ イル を 設定 する 
HTML (<body> 要素 内 の み 抜 粋 ) 


<u い 1 1d= "エロ 1 は 七 "> 
<]1i> り ん ご </11> 
<]1> み か ん </ ユ 1> 
<]1> い ちご </1 ユ 1> 
<1 4 どう < / え > 
<]i> い よ か ん </1 ュ > 
</u]> 





JavaScCript 


$(Eunction() { 
$("#Eru1t8 > 11") 。cgg( "background-Co1or" ,。 "red") 』 
$("#Fru1t8 > 11:eVven") 。Cgg("Co1or"。 "white") 


} ) : 





一 実行 結果 


|) JavaScript の 練 贅 x 舞 
ua は fie:77C:/vomk le1214.html ーー 





し か し 、 こ の 記述 方 法 は あま り 好 まし く あ り ま せん 。#fruits > ji に 合致 す 
る 要素 を 検索 する 作業 が 2 回 発生 し て いる た め 、 そ の 分 スク リプ ト の 実行 に 時 
間 が か か っ て し ま う の で す 。 


$(" 提 Fru1tg > 11") 。cgg( "backqround- Co1Or リ / red" ) , 
$("#Eru1t8 > 1]1:even") .cgg("color",。 "white") 


同じ 要素 を 何 度 も 検索 し な いよ うに する に は 、2 つ の 方 法 が あり ます 。 


k3 処理 速度 の 高速 化 " 

1 つ 目 は 、 取 得 し た 要素 を 変数 に 代入 し て お く 方 法 で す 。 リ スト 12.15 で は 、 
#fruits > に 合致 し た 要素 群 を 変数 elm に 代 人 し て いま す 。 以降 は 変数 elm 
に 対し て スタ イル の 適用 処理 を 行なえ ん ば 良い の で す 。 
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いこ 【 人 AA 
か や ササ 4 で か 第 童 上 剖 1 Y り J YY Mi < t 
YY を 六 の II リプ で マン ーー メ / 0 よれ < 


今回 は 変数 elm が 持つ 要素 の うち 奇数 番目 の 文字 色 も 変更 する の で 、 有 要素 を 
絞り 込む た め の filter メ ソ ッ ド を 利用 し て いま す 。 


Ws filter メ ソ ッ ド 
要素 群 .E11ter ("セレ クタ や フィ ル タ ") : 





filter メ ソ ッ ド は 、 要 素 群 か ら セ レク タ や フィ ル タ に 合致 する 要素 の み を 抽出 
し まず まず 。 


リス ト 12.15 ter メソッド の 利用 


$(Eunotion() { 
V&r Ge]1m = $(" 提 Fru1tg > 11")』 
e1m.cgsg ("backqround-Col1or", "red") 』 


e]m。E1i1ter(":even") 。cgg( "color",。 "white リ ") 


}) : 





次 の よう に 3 段階 で 処理 を 行なっ て いま す 。 


取得 し た 要素 群 を 変数 elm に 代 人 する 


8Y Ge]1m = $("#F エ u1 ユ tg > 11")》 







<11> りん ご </11> 






<11> みか ん </1i> 






<11> いち ご </1i> 









<1> が ぶどう </11> 
<11> いよ か ん </11> 





の 変数 elIm に 代入 され て いる すべ て の 要素 の 背景 色 を 赤 に 変更 する 


e1m.cgg ("backqround-Co1or" , "red") : 
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⑥ 変 数 elIm に 代入 され て いる 要素 の 中 か ら 人 奇数 番目 の み を 抽出 し 、 文 字 色 を 
日 に 変更 する 


e]1m.E11ter(":even") .cagg( "Color", "white")』 


|c1 ュ > りん ご </11> 凌 


fllter で 抽出 





K3 メソ ッ ド チェ ー ン 

要素 の 検索 回 数 を 抑え る も う 1 つ の 方 法 と し て 、 メ ソ ッ ド チェ ー ン が あり ま 
す 。 メ ソ ッ ド チェ ー ン は 、 メ ソ ッ ド の 後ろ に 続け て 別 の メソ ッ ド を つなげ る 記 
法 で 、 要 素 に 対し て 複数 の 処理 を 実行 で きま す 。 リ スト 12.16 は 、 前 述 の スク リ 
プ ト を 書き 直し た も の で す 。"#fruits > ij" に 合致 する 要素 群 を 取得 し て 背景 色 
を 設定 し た 後 、 さ ら に 要素 を 人 奇数 番目 の み に 絞 り 込 ん で 文字 色 を 設定 し て いま 
す 。 





リス ト 12.16 メソ ッ ド チェ ー ン の 利用 


$(Function() { 
$("#Fru1tg > 11") .cgg( "backqround-cColor" , "red" ) . 列 


Fi]1ter(":even") 。cg8( "Color", "white")』 


}) 





この スク リプ ト は 、 次 の よう に 4 つの パー ト か ら 成 り 立 っ て いま す 。 
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ョ ・ ww は wT キ ギャ WW ャ ャ ゃ すき 幸作 二 き WM や まゆ か ゃ ME 1 TE お す wW 事 すず - 4 
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$ ("#Fruitg > 11").ogg("background-Co1or", "red" ) . 別 


fi1ter(!":even") 。.cgg8( "Color" , "white") 


ID が 「fruits| の 要素 を 親 と し て 持つ <li> 要素 を すべ て 取得 する 
の で 取得 し た 要素 の 背景 色 を 赤 に 設定 する 

9 で 取得 し た 要素 群 か ら 人 奇数 番目 を 抽出 する 

の 9⑨ で 抽出 し た 要素 の 文字 色 を 白 に 設定 する 


メソ ッ ド チェ ー ン を 使う と 1 行 が 長く な っ て し まう の で 、 次 の よう に ドッ ト の 
前 で 改行 する と 見 や すく な り ま す 。 


$(Eunoction() { 
を 区 だ 1 だ は 1 よさ すす 
・C8g8 ( "backqround-Co1or リ " , "red" ) 
Ei1ter(" : even" ) 
>C あ あき ( CO よ O の て! 。 WIIEGPj) 


}) 


3 子孫 要素 の 絞り 込み 
filter メ ソ ッ ド に よく 似 た 、find と いう メソ ッ ド が あり ます 。 こ の 2 つ は 混同 
し や すい の で 、 サ ンプ ルコ ー ド を 見 て その 違 い を 理解 し まし ょ う 。 


ea Tin メソッド 


要素 群 Eind(" セ レク タ や フィ ル タ 『) : 





find メ ソ ッ ド は 、 要 素 群 の 子孫 要素 の 中 か ら セ レク タ や フィ ル タ に 合致 する 
要素 の み を 抽出 し ます 。 


リス ト 12.17 fter メ ソ ッ ド と find メソッド 
HTML (<body> 要素 内 の み 抜 粋 ) 
<dQ1V Ca88=" ュ 1Eem" > 


<p> あ いう え お </Dp> 
</d1 ざ > 


<d1 ざ > 
<p cl]asg="1tem"> か きく け こ </p> 
</d1> 





JavaScript 


$ (funoction() { 
Con8ole.1od($( "di" ) .E11ter(" .1tem'" ) .htm1 () ) : 
con8ole.1od($ ("di") .Eind(!.1tem" ) .htm1() ) 


filter メ ソ ッ ド は 、<div> 要素 の うち 「item」 と いう CSS ク ラス を 持つ 要素 を 


取得 し ます 。 


$("div") .f11ter(" 和 .htm1(), 





<div> 
<Dp class="1tem"> か きく け こ </p> 
</d1Y> 


それ に 対し て find メソッド は 、<div> 要素 の 子孫 要素 の 中 か ら |「item」 と い 
う CSS ク ラス を 持つ 要素 を 取得 し ます 。 


$("div") .Eind(".1item') .htm1 ( ) : <d1iV Cl]agg="1tem"> 
| <p> あ いう え お </p> 
</ diY> 


<d1 ざ > 





</div> 


html メ ソ ッ ド は 、 開 始 タ グ と 終了 タグ の 間 の HTML を 返し ます 。 innerHTML 
プロ パテ ィ が 表わす 値 と 同じ で す 。 詳 し く は 次 節 で 解説 し ます 。 


m フィ ル タ や filter / find メ ソ ッ ド を 使う と 、 セ レク タ で 取得 し た 
要素 を 絞り 込む こと が で きる 。 
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還 Oheck 定 est 3③ 


Q 1 以下 は 、<div> 要素 の 子 要素 の うち 、 先 頭 要素 の 文字 色 を 赤 に 変更 する 
スク リプ ト で す 。 空 杉 を 埋め て 完成 させ て くだ さい 。 


$S("div > *| 中).css("co1or",。 "red") 


⑳ る ⑳ 以下 は 、< ぐ input> 要素 の うち 「hoge] と いう name 属 性 値 を 持つ 要素 の 
文字 色 を 赤 に 変更 する スク リプ ト で す 。 空 層 を 埋め て 完成 させ て くだ さい 。 


$("input| 中).cgg("co1or", "red") 





ご 解答 は 巻末 に 掲載 
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| 内容 と 属性 の 操作 
内 容 と 属性 の 変更 


要素 の 取得 方 法 を 理解 し た と ころ で 、 続 いて は 要素 に 対し て 属性 値 や イベ ン 
ト ハ ンド ラ 、CSS ク ラス を 設定 する 各種 メソッド に つい て 学び ます 。 

内 容 や 属性 を 変更 する こと で 、 条 件 に 応じ て 表示 され る メッ セー ジ を 変更 し 
た り 、 画 像 や CSS ク ラス の 切り 替え な ど を 行なう こと が で きま す 。 





html メ ソ ッ ド 
要素 に 含ま れる 内 容 を 操作 し ます 。 引 数 を 指定 し た 場合 は 内 容 を 上 書き し 、 
引数 を 省略 し た 場合 は 現在 の 内 容 を 返し ます 。 


ms 内容 の 変更 
要素 .htm1 ( 値 ) 


対象 の 要素 が 複数 件 ある 場合 、 す べ て の 要素 の 内 容 を 書き 換え ます 。 


人 内 容 の 取得 


対象 の 要素 が 複数 件 ある 場合 、 一 番 先頭 の 要素 の 内 容 を 取得 し ます 。 





リス ト 12.18 内 容 の 操作 
HTML (<body> 要素 内 の み 抜 粋 ) 


<Dp 1d= "msg1 "> お は よう </D> 
<D 1d="msg2"> こ ん に ち は </p> 
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JavaScCript 


$(Eunoction() { 


$ ( "#msd1 " ) .htm1 ($( "#msd2 " ) .htm1() ) : 





}) : 
瑞 実 行 結果 


| JavaScript の 練習 0 


こん に ちい は 
こん に ちい は 





リス ト 12.18 で は 、 ま ず 「msg2] と いう ID を 持つ 要素 の 内 容 を 取得 し 、 そ れ 
を |msgl」 と いう ID を 持つ 有 要素 の 内 容 と し て 設定 し て いま す 。 


$ ("##mgd1" ) .htm1($(『 拓 mgg2") .htm1 () ) : 
"こん に ち ぢ ち は "を 取得 
$ ( " 后 mgd1" ) .htm1 ("こん に ち は 『" ) 
② 内 容 を "こん に ち は " に 変更 


処理 イメ ー ジ 









3 val メ ソ ッ ド 

value 属 性 値 を 操作 し ます 。html メ ソ ッ ド と 同様 に 、 引 数 を 指定 し た 場合 は 
value 属 性 値 を 上 書き し 、 引 数 を 省略 し た 場合 は 現在 の value 属性 値 を 返し ま 
の 


中 ue 属性 値 の 変更 


要素 .Yya1 ( 値 ) 


対象 の 要素 が 複数 件 ある 場合 、 す べ て の 要素 の value 属性 値 を 書き 換え ます 。 





|ue 属性 値 の 取得 


対象 の 要素 が 複数 件 ある 場合 、 一 番 先頭 の 要素 の value 属 性 値 を 取得 し ます 。 


リス ト 12.19 value 属性 値 の 操作 
HTML (<body> 要素 内 の み 抜 粋 ) 


<1nput type="text" 1d="m8d1" Value= "お は よう "> 


<1nput tyDe= "上 ex 上 1d="msgd2" value=" リ こんにちは "> 





JavaScript 


$(Eunoction() { 
$ ( "msd1" ) .Ya1 ($( "#msd2 ") .Ya1 () ) 


}) 


| 〕avaScript の 練 吾 人 NR 
と っ C Hfle:///C:/work/list12_19.htm|  " " | 三 





3 attr メ ソ ッ ド 
value 以 外 の 属性 値 を 変更 し ます 。 第 2 引数 を 指定 し た 場合 は 属性 値 を 上 書 
き し 、 省 略し た 場合 は 現在 の 属性 値 を 返し ます 。 


eS、 居 性 値 の 変更 
要素 . att と (『 属 性 名 ", 値 ): 


対象 の 要素 が 複数 件 ある 場合 、 す べ て の 要素 の 属性 値 を 書き 換え ます 。 


属性 値 の 取得 


対象 の 要素 が 複数 件 ある 場合 、 一 番 先 頭 の 要素 の 属性 値 を 取得 し ます 。 
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是枝 。12 


リス ト 12.20 その 他 の 属性 の 変更 


HTML (<body> 要素 内 の み 抜 粋 ) 


JavaScript 


$(Eunction() { 
$ ("1mg") .attr( "Sro", "1magegs/fFrod1 . pd" ) 』 


7) 


| JavaScript の 練習 





4 っ G 口 fle:///C:/work/list12_20.html 





リス ト 12.20 を 実行 する と 、 空 の <img> 要素 に 対し て src 属 性 が 設定 され 、 
次 の よう に 記述 し た 場合 と 同じ 状態 に な り ま す 。 


4 <1mg SrC="1mages/fFroq1 . ]pd "> 


3 removeAttr メ ソ ッ ド 
指定 し た 属性 を すべ て の 要素 か ら 削 除 し ます 。 


% き 司 性 の 削除 
要素 . removeAttr (『 属 性 名 『) 
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属性 の 削除 は 、 次 の よう に attr メ ソ ッ ド で 属性 の 値 に 空 文字 を 設定 する こと 
で も 行なう こと が で きま す 。 


$ ("1mg7) 。A も も セ デ ( "BYC『 。 WW 。 


し か し 、selected、changed、enabled、disabled の よう な 、 値 の 省略 が 可能 
な 属性 は removeAttr メ ソ ッ ド で な けれ ば 削除 で きま せん 。 


リス ト 12.2]1 その 他 の 属性 の 変更 
HTML (<body> 要素 内 の み 抜 粋 ) 


<1input type= "checkbox" name="Eru1ts" value="apple" 凡 
checked> り ん ご 
<1input type="ocheckbox" name="Fruits" value="orande リ " 則 


checked> み か ん 
<input type= "oheockbox" name="Fruits" Value="8rawDberry'" 同 
checked> い ちご 





JavaScript 


$ (Funotion() { 
$ ("input [va1ue= !orande ' ] " ) .removeAttr( "Checked" ) : 
)) 7 


| JavaScript の 練習 ペ 
と うみ @ ロ file:///C:/ 








イベ ント ハン ドラ の 設定 


第 10 章 で 学習 し た DOM 要 素 に 対す る イベ ント ハン ドラ の 設定 を jQuery で 
行なう に は 、on メ ソ ッ ド と off メ ソ ッ ド を 利用 し ます 。 
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還 時 。 12。 人 
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K3 on メソ ッ ド 

要素 に 対し て イベ ント ハン ドラ を 登録 し ます 。 第 1 引数 の イベ ント 名 に は 「on」 
は 付け ませ ん 。 複数 の イベ ント 名 を スペ ー ス 区 切り で 指定 すれ ば 、 そ れ ぞ れ の 
イベ ント に 対し て 同じ 処理 を 設定 する こと が で きま す 。 第 2 引数 は 関数 に 渡す 引 
数 で 、 オ プ ジ ェ クト 型 の デー タ に し ます 。 関 数 が 引数 を 受け 取ら な い 場 合 は 省 
略 可 能 で す 。 第 3 引数 に は イベ ント 発生 時 に 実行 する 関数 を 指定 し ます 。 


sz る 0O ロ メソッド 





リス ト 12.22 引数 の な い 関数 を イベ ント ハン ドラ に 登録 する 
HTML (<body> 要素 内 の み 抜 粋 ) 


<but 上 ton 1d= "btn"> ク リッ ク </jbutton > 


JavaScript 
$ (funoction() { 
$(" 提 btn") .on("cC1ick" ,。 gayHe11o) 
)) 


Eunction sayHe11o() { 
alert(" こ ご こんにちは") 





一 実行 結果 


| JavaScript の 練 禄 “ 
PC SIZ2 


ーーーーーーーーーーーーーーーーーーーーーーーーーーーー ーーーーーーーーーーーーーーーーーーーーーーーーー ーー 





リス ト 12.22 で は 、 ボ タン の click イベ ント 時 の 処理 と し て sayHello 関数 を 登 
まし て いま す 。 on メソ ッ ド が 実行 きれ る と 、<button> タ グ に 対し て 次 の よう 
に イベ ント ハン ドラ を 設定 し た 場合 と 同じ 状態 に な り ま す 。 








putton 1dsvbtn 開 詳 開 間 衣 間 前 間 間 > クリ ッ ク </button> 


sayHello 関数 を 他 の 用 途 で 利用 する こと が な い の で あれ ば 、 次 の よう に 匿名 
関数 と し て on メソ ッ ド の 引数 に 直接 指定 し て も か まい ませ ん 。 


5("Wbtn) ・on("c1ick"。 Emeton)f 
erers ん Fi 





イベ ント ハン ドラ に 登録 する 関数 が 引数 を 受け 取る 場合 は 、on メ ソ ッ ド の 第 
2 引数 に 関数 へ 渡す 値 を 設定 し ます 。 


リス ト 12.23 引数 の ある 関数 を イベ ント ハン ドラ に 登録 する 
HTML (<body> 要素 内 の み 抜 粋 ) 


<button 1d= "btn"> ク リッ ク </but 上 ton> 


JavaScript 


$(Eunction() { 
$ ( "#btn") .on("c1ick", { name: "よし お " 」, sayHe11o) : 


})) 

Eunction sayHe11o(event) { 
alert(event.data.name + "さん 、 こ ん に ち は 『")』 

) 


| JavaScript の 練 


半生 CJAorkkoH12 23.tm ーー 


ーー ペー ペー ペーーーーーーー- ーーーー ネ ーー ュー ニー ニア マ ーー ツマ ーーー シー ニー マーー ペ ーーー ニー と ーーーーーーー・ 


| クック | 





引数 は オブ ジェ クト 型 (連想 配列 ) に し て 渡し ます 。on 関 数 を 使っ て 引数 
を 渡し た 場合 、 普 通 に 関数 を 呼び 出し た と き と は 異な る 引数 の 渡し 方 に な り ま 
す 。 引 数 と し て 渡さ きれ た オブ ジェ クト は 、 関 数 側 で 受け 取っ た 変数 の data プロ 
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パテ ィ の 中 に 代入 きれ て いま す 。 


$ (function() { 「 
$ ( "#btn!) 。on ("cl11ick" / 抽 6 


4 op dy/2006 1 
function sayHe11o(event)--{「 event.data の 中 に 代入 され る 


alert(event.data.name + "さん 、 こ ん に ち は 『) 』 


9 ], sayHe11o) 





これ を 図 に する と 、 次 の よう な イメ ー ジ で す 。 





な お 、on メ ソ ッ ド は イベ ント ハン ドラ の 上 書き で は な く 追 加 な の で 、 同 セイ 
ベン ト に 対し て 複数 の 関数 を 登録 する こと も 可能 で す 。 


リス ト 18.24 1 つの イベ ント に 複数 の 関数 を 設定 する 
HTML (<body> 要素 内 の み 抜 粋 ) 


<Dut 上 上 on 1d= "btn"> ク リッ ク </jbutt 上 on > 


JaVvaScript 


$(funotion() { 
$ ("#Dtn" ) 
・Oon ("Cl1CkK" , printHe1] 1O) 
<on("Cliok", sayHe11o) 


}) : 


Eunoction printHe11o() { 


console.1og ("こん に ち は 『") 


| 


Eunction sayHe11o() { 
alert 上 ("ご こんにちは") 
) 





一 実行 結果 


[ JevaScript の 罰 P ロ 
を 。 っ @ hfle://C:/worlistt224.html 。。 「 





避 。>:= へ <topframe> y 才 訪 | Frrors wernines Loes Debue 


リス ト 12.24 で は 、click イ ベン ト に 対し て printHello 関数 と sayHello 関数 を 登 
録 し て いま す 。click 時 に は 2 つの 関数 が 登録 し た 順に 実行 きれ ます 。 


3 off メソッド 

要素 に 関連 付け られ た イベ ント ハン ドラ を 削除 し ます 。 引 数 を すべ て 省略 し 
た 場合 、click、focus な どの 全 イ ベン ト ハ ンド ラ が 削除 きれ ます 。 第 2 引数 の み 
を 省略 し た 場合 、 指 定 し た イベ ント に 設定 され た すべ て の 関数 が 削除 され ます 。 


ea Off メソ ッ ド 





リス ト 12.25 イベ ント ハン ドラ を 削除 する 
HTML (<body> 要素 内 の み 抜 粋 ) 


<button 1d= "btn"> ク リッ ク </but 上 toOn > 


JavaScript 


$(Eunoction() { 
$(" 提 btn") .on("cClick", gayHe11O) 』 


}) : 


Eunoction sayHe11o() { 
alert 上 ("こん に ち は 『") 』 
$("#btn") .oEE("C11oCk" , gayHe11O) : 
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[ ) JoyeSoript の 引 罰 5 mn いこ 
人 De ん workg12_25.hm aa 


2 リッ ク 





1 回 目 の ク リッ ク 時 ら 回 目 の ク リッ ク 時 


リス ト 12.25 で は 、 ク リッ ク 時 に 実行 する sayHello 関数 の 中 で 、 イ ベン ト ハ ン 
ドラ を 削除 する 処理 を 行なっ て いま す 。 一度 sayHello 関数 が 実行 され る と 、 関 
連 付け られ た 処理 は な く な る の で 、2 回 目 以降 の クリ ッ ク 時 に は な に も 起こ り 
ませ ん 。 


実行 イメ ー ジ 
$(function() { 
$("#btn") .on("c1ick", sayHe11o) 
}) 7 


Eunction sayHe]11o() { 
alert 上 ("こん に ち は 『") 』 


$ ("Hbtn") .oEE("c1ick", sayHe11o) , ボタ ン の click イ ベン ト か ら 


. SayHello 関 数 を 削除 _ 





K3 イベ ント 発生 元 の 特定 
イベ ント の 発生 元 要素 を 表わす this キー ワー ド は 、 jQuery の 場合 、 次 の よう 
に 記述 し ます 。 


$ (thig) 


リス ト 1225 は 2 回 目 以降 の ボタ ンク リッ ク 時 に は な に も 処理 を 行なわ な い ス 
クリ プ ト で し た の で 、1 回 目 の ク リッ ク が 行なわ れ た 際 に ボタ ン を 和 無効 化す る 
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処理 を 追加 し て み ま し ょ う 。 


リス ト 12.26 jQuery に よる イベ ント 発生 元 の 取得 
HTML (<body> 要素 内 の み 抜 粋 ) 


<but 上 ton 1d= "btn"> ク リッ ク </butt 上 on > 


JaVvaScript 


$ (function() { 
$("#Dtn") .on ("Cl11Ck",。 sayHe11o) 
7 ) 7 
Eunction gayHe11o() { 
alert(" り こんにちは 『) 
$( "#btn『") 。OEE("C11Ck" 。 gayHe1 ユ 1O) 》 


ボタ ン が 無効 に な つて いる 


し - 
* * @ [fle://C:/worlght12_26.html IS を み 人 で き fe:///C:/work/list12_26.htm 必 


JaveScript の 村 呈 


リック 


ご 人 ド ち は 


] 回 目 の ク リッ ク 時 回目 の クリ ッ ク 時 


リス ト 1226 で は 、 ボ タン クリ ッ ク 時 の 処理 の 中 で イベ ント の 発生 元 で ある ボ 
タン に disabled 属性 を 設定 し て いま す 。disabled 属性 は 属性 名 、 属 性 値 と も に 


"disabled を 指定 し ます 。 


$(thig) .attr("disab1ed", "disab1ed" ) 


クリ ッ ク イ ベン ト の 発生 元 で ある ボタ ン を 表わす 


これ に より 、1 度 クリ ッ ク が 行なわ れ た ボタ ン は 無効 化 さ れ た 状態 で 表示 さ 


れ ま す 。 
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CSS クラ ス の 変更 


ここ まで 、 ス タイ ル を 変更 する 処理 は css メ ソ ッ ド で 行なっ て いま し た 。 し 
か し 、 実 際 の Web 制作 現場 で は 1 つの 要素 に 対し て 複数 の スタ イル を 設定 する 
た め 、css メ ソ ッ ド で 1 つ 1 つ CSS プロ パテ ィ を 指定 し て いる と 非常 に 長い コー 
ド に な っ て し まい ます 。 で す の で 、 あ ら か じ め CSS プロ パテ ィ 群 を まとめ て 1 つ 
の CSS ク ラス と し て 用 意 し て お き 、 要 素 に 対し て CSS ク ラス を 付け 替え る 方 法 
を 用 いる の が 現実 的 で す 。 





3 addClass メソ ッ ド 

要素 に 対し て CSS ク ラス を 追加 し ます 。 上 書き で は な い の で 、 元 々 設定 され 
て いた CSS ク ラス が 削除 され る わけ で は あり ませ ん 。 複数 の CSS ク ラス を ス 
ペー ス 区 切り で 指定 する こと も で きま す 。 


es 0HCIaSS メソッド 





要素 。addC1ags ("CSS ク ラス 名 『) 


リス ト 12.27 CSS の 追加 
HTML (<body> 要素 内 の み 抜 粋 ) 


<p 1d="msd" clasg="1arge"> こ ん に ち は </p> 


JavaScriDpt 


$(Eunction() { 


$ ( "#msqg") .addC1agg( "high11ight") 


)) 





CSS 


.1arge { 
fon-81ze: 30DX: 


) 

.high1ight 1{ 
CoO1or : Wh1t6: 
bacCk 可 YOundd- で OOr : エ Gdz: 





還 実 行 結果 


| JavaScript の 練 表 


こん に こち は 





リス ト 12.27 で は 、 対 象 の <p> 要素 に 対し て 「highlight」 と いう 名 前 の CSS 
クラ ス を 追加 し て いま す 。 addClass メ ソ ッ ド が 実行 され る と 、 次 の よう に < く p> 
タグ の class 属 性 を 記述 し た 場合 と 同じ 状態 に な り ま す 。 


<Dp 1d="msg" clas8="1arqe high1ight "> こん に ち は </p> 


3 removeClass メソ ッ ド 
要素 か ら CSS ク ラス を 削除 し ます 。 複数 の CSS ク ラス を スペ ー ス 区 切り で 指 
定 す る こと も で きま す 。 





sz る BTmOVeClaSS メ ソ ッ ド 


要素 .removeC1agg ("CSS ク ラス 名 『) 』 


リス ト 12.28 CSS の 削除 
HTML (<body> 要素 内 の み 抜 粋 ) 


<p 1q="msg" cl1asg="1arge"> こ ん に ち は </p> 


JavaScript 






$ (Eunction() { 


$ ( "#m8d" ) .removeClagsg("]arqe") 』: 


}) 





CSS 
・1arge { 


) 


Font-g1ze: 30DX: 
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る hh4 で | fle: 777C: /work/list12_ 28.html | 昌 


eo ジー スー こも こっ sale > 和央 HTPT ST を YAT 和 ホ 9 で 3 が TENINOFSIDTPt チ YUIP TREE 利 PPURPSRUTSE ー 


ーー トー レーA こ に とくよ こ ーー と こつ し ーーー ツ ーーー 





リス ト 12.28 で は 、 対 象 の <p> 要素 か ら 「large」 と いう 名 前 の CSS ク ラス を 
削除 し て いま す 。 実行 後 は C じ SS クラ ス が 1 つも 適用 きれ て いな い 状 態 と な る た 
め 、 ス タイ ル 未 設定 の 要素 が 表示 され ます 。 


3 toggleClass メソッド 

CSS ク ラス の 追加 と 削除 を 交互 に 繰り 返し ます 。 ク リッ ク さ れる だ た びに スタ 
イル が 付い た り 外 れ た りす る 処理 な ど に 利用 し ます 。 複数 の CSS ク ラス を ス 
ペー ス 区 切り で 指定 する こと も 可能 で す 。 


Ke る (OggleClaSS メソッド 
要素 . togg1eC1ags ("CSS ク ラス 名 『) : 


リス ト 12.29 表示 エリ ア の 切り 替え 
HTML (<body> 要素 内 の み 抜 粋 ) 






<1nput type="radio" name= "tardet" value="1" checked> 一 般 用 
<1nput type="rad1io" name= "tarqet" value="h"> 法 人 用 
<u] 1d="1Dpan area" Cl1a88= "acCt 上 1Ve "> 
<11> 氏 名 <1nput type="text" name= "name"></ ユ > 

<1 > 住所 <1nput 上 ype="text" name="addre8s8 "></]1> 
<]1i > 電話 番号 <1nput type="tex 上 " name= "上 Ge1 "></1 ユ > 
</u] > 

<u] 1d="ho]1n area" Cla88= "Da881Ve"> 
<1i> 会 社名 <1nput type="t 上 ex 上" name="Company リ ></ ユ 1> 
<1i > 部 署名 <1nput type=" 上 ex 上 name= "busho"></11> 
<1i> 担 当 者 名 <1nput type="t 上 ex 上 " name= "上 antO リ "></1 ユ 1> 
<1 1 > 住所 <1nput 上 ypDe="Etext 上 " name="addre88 "></ ユ ユエ > 
<11 > 電話 番号 <1nput 上 ype=" 上 ex 上 " name="Ee1 "></] エ > 

<] > 内 線 番 号 <1nput type="tex 上 " name="na1tsen"></] ユ > 
</u] > 





JavaScCriDpt 


$(Eunction() { 
$ ("input [name= 'target !] ") .on ("change", Eunotion ( ) { 
$ ( "#1ppan area, #ho]in area" ) .togg1eC1agg 同 
( "ac 上 1Ve Da881Ve"): 
}) : 
)) 7 


CSS 


.・active 1{ 
dtsplay: bl1ock: 
) 


・pa881ive { 
dgplay: nonez 


| ) JavaScript の 線 還 % | JavaScript の 練 震 
4 』 @ () fle:/C:/worllist1229.htm  。 。 空 。  @ fle:///C:/worylistt2-29.html 。 裕 
W 一 般 用 〇 法 入 用 けり 一般 用 負 法 人 用 


氏名 | 
人 
・ 





リス ト 12.29 は 、 第 10 章 で 紹介 し た 表示 エリ ア を 切り 替え る スク リプ ト (233 
ペー ジ の リス ト 103) を 、 jQuery を 利用 し て 書き 直し た も の で す 。 ま ず 、 オ 
プシ ョ ン ボ タン の 選択 状態 が 変更 され た と き の 処 理 と し て 階 名 関数 を 登録 し 
て いま す 。 匿名 関数 の 中 で は 、2 つ の 表示 エリ ア に 対し て |active] クラ ス と 
| passive」 クラ ス を 交互 に 追加 削除 し て いま す 。 


$ ("input [name= 'target '] ") .on( "change", | Eunction () { 






$("#1ppan area, #ho]1n area") .togg1eC1agg(! 






この ペー ジ の 初期 状態 で は 、 一 般 用 入力 エ リア に は |active] クラ ス が 、 法 
人 用 和信 力 エリ ア に は 「passive] クラ ス が 設定 され て いま す 。 オ プシ ョ ン ボ タン 
の 選択 状態 が 変更 さき れる と 、 一 般 用 入力 エリ ア か ら |active」 クラ ス を 削除 し 、 
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「passive」 クラ ス を 登録 し ます 。 反 対 に 法人 用 入力 エリ ア か ら は |passive] クラ 
ス を 削除 し て 「active」 クラ ス を 登録 し ます 。 要 する に CSS ク ラス が 現在 登録 さ 
れ て いれ ば 削除 し 、 削 除 さ ん れ て いれ ば 登録 する 、 と いう 動き を し て いる の で す 。 


の みり 


KYO た こっ 


に 対し て 処理 が 実行 され る 。 


Oheck 更 est 44 


⑳ 1 以下 は 、<button> 要素 が クリ ッ ク さ れ た タイ ミン グ で ぐ op> 要素 の 内 容 
に 「 こ ん に ち は 」 を 設定 する スク リプ ト で す 。 空 億 A と B を 埋め て 完成 
させ て くだ さい 。 





$("button") .[ A |("c1ick", Eunction(){ $("p").[ B | 如 
("こん に ち は 『) : )) 


⑳ る ⑳ 以下 は 、<input> 要 素 の name 属 性 値 に "hoge" を 設定 する スク リブ ト 
で す 。 空欄 A と B を 埋め て 完成 させ て くだ さい 。 


$ ("1nput") 。 | A |(| B 用, hoge") 





ご 解答 は 巻末 に 掲載 
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② 要素 の 追加 / 削 除 ノ 置 換 


前 節 で 学ん だ メソ ッ ド は 、 あ ら か じ め 存 在 する 要素 の 内 容 や 属性 を 変更 する 
も の で し た 。 こ こ で は さら に 高度 な DOM 操作 と し て 、HTML 文書 内 に 新た な 
要素 を 追加 し た り 、 既 存 の 要素 の 削除 を し た りす る 方 法 を 学び ます 。 要素 ご 
HTML を 書き 換え る こと が で きる た め 、 同 じ ペ ー ジ を 表示 し て いる に も か か わ 
ら ず まっ た く 別 の ペー ジ が 表示 され た か の よう な 視覚 効果 を 与え る こと が で き 
ます 。 








K3 append メ ソ ッ ド 、prepend メ ソ ッ ド 

要素 内 に 新た な 要素 を 追加 し ます 。 引 数 に は 開始 タグ か ら 終 了 タ グ ま で の 
HTML を 記述 し ます 。append メソッド は 末尾 、prepend メ ソ ッ ド は 先頭 に 要 
素 を 追加 し ます 。 





SaDDGTd メソ ッ ド 
要素 .append ("HTML 要素 ) : 


WS DTDeTd メソッド 
要素 .prepend ("HTML 要素 ) : 









リス ト 12.30 子 要素 の 追加 
HTML (<body> 要素 内 の み 抜 粋 ) 


<ul 1d= "ffYu1t8"> 
<1 す っ りん </ エ よ > 
<]1i> み か ん </1 ユ 1> 


<]1i> い ちご </11> 
<]1i> ぶ どう </1 ユ > 
</u]> 











た まま まき 内 T 
W w ルナ WW _- - ー 5 v WP 
W.Y Nma iq MA wa | _ 
ゃ ャ ホネ ルド WWwNIe マ 
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JavaScript 


$ (function() { 
S ( " 提 Fru1t8") 


・append ("<] エ > パイ ナッ プル </11>" ) 
.prepend ( "<]1 エ > パパ イヤ </11>『") : 





}) : 


一 実行 結果 


| JavaScript の 練習 
を っ ふ @ hfle: 7//C:/work/list12_30. 30. html_ ーー 


ーー 


e ババ イヤ 
りん ご 





es ぶどう 
e パイ ナッ プル 





リス ト 12.30 は 対象 の <ul> 要素 内 に 2 つの 要素 を 追加 し て いま す 。 ス クリ プ 
ト が 実行 きれ る と 、HTML が 次 の 状態 に 変更 され ます 。 


実行 イメ ー ジ 


0 よ 09 24 


ます る preDehnd メソッド に よっ て 先頭 に 追加 





23 の 77082 770 
<]1> み か ん </11> 
<]> い ちご </1 ユ > 
NO 


グル </11> append メ ソ ッ ド に よっ て 未 尾 に 追加 





K3 after メ ソ ッ ド 、before メソッド 

要素 の 前 後に 新た な 要素 を 追加 し ます 。append メソッド 、prepend メ ソ ッ ド 
が 子 要素 の 追加 だ っ た の に 対し て 、after メ ソ ッ ド 、before メ ソ ッ ド は 見 第 要 素 
を 追加 し ます 。 


ea af 人 teT メソッド 
要素 .aEter( "HTML 要素 ) : 


ex befOre メソ ッ ド 


要素 .before ( "HTML 要素 『) 
















リス ト 12.31 兄弟 要素 の 追加 
HTML (<body> 要素 内 の み 抜 粋 ) 


<p> こ ん に ち は </p> 


JavaScript 


$(Efunction() { 
$ ( Ws の 
.・aEter ("<p> お や すみ </p>" ) 
.・before( "<p> お は よう </p>") : 





}) 


一 実行 結果 


| JavaScript の 練 吾 
を っ G hfle://C:worlist2_31html  〔{〔R 宮 


mm マー パー ュー いて ーー ーー で ーー 


こん に ち は 
お や すみ 





リス ト 12.31 は 、 対 象 の <p> 要素 の 前 後に 2 つの 要素 を 追加 し て いま す 。 ス ク 
リプ ト が 実行 きれ る と 、HTML が 次 の 状態 に 変更 され ます 。 


実行 イメ ー ジ 






<p> お は よう </p> before メ ソ ッ ド に よっ て 前 に 追加 
2 も お 計 が 702 


Pp> after メソッド に よっ て 後ろ に 追加 





3 empty メソッド 
要素 が 持つ すべ て の 子 要 素 を 削除 し ます 。 実行 後 は 、 要 素 の 内 容 は 空 に な り 
ます 。 





se ふ GTmDty メソ ッ ド 


要素 . empty () : 
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まま HEAULR、E Seiulu 0 衝 本 WW we キオ チコ が 才 F が A ルド ボサ ネ キ を KW キネ WW ポ さ が ザ ボキ We まず WNW ます ホキ ナ WW キ WW WW ルル 導 本 ポキ や さす MY や ヤ w * 『 かも % 改 m で NT まま さそ RAR まき うさ 。 - A 人 Wi "赤本 
WWA た IPMW や MA ・ _ Ng W 『 - 

NWWANAN ザ \n か _ 

TE は ま まま まま W 「 

EEREHKEUNIANUL 「 | _ 
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リス ト 12.32 子 要素 の 削除 
HTML (<body> 要素 内 の み 抜 粋 ) 


<u] 1d= "モエ u い 1 上 8『> 
<]1i> り ん ご </11> 
<]1i> み か ん </11> 


<]1i> い ちご </11> 
<]1i> ぶ どう </11> 
</u] > 





JavaScript 


$(Eunction() { 
$ (" 提 Fru1tS" ) .emptY() 


)) : 





還 実 行 結果 


| ) JavaScript の 練習 X 


4 っ @ btle:7/C:/wortsd232hml 


ェ ーッ マニューバ ーッ ペ ーーーーー・ こ ーー も ーー マー て ここ る そく ーー ニー バー ュー 





リス ト 12.32 は 、 対 象 の <ul> 要素 が 持つ 子 要 素 を すべ て 削除 し て いま す 。 ス 
クリ プ ト が 実行 さき れる と 、HTML が 次 の 状態 に 変更 され ま す 。 


実行 イメ ー ジ 
<11 1Qa チャ u1tg『 > っ 


</u1] > empty メ ソ ッ ド に よっ て 子 要素 が すべ て 消え る 


KK replaceWith メソッド 
要素 を 指定 し た 別 の 要素 で 置き 換え ます 。 


sw TeGDIaCeWith メソッド 





要素 .rep1aceWith ("HTML 要素 ) : 





リス ト 12.33 要素 の 置換 
HTML (<body> 要素 内 の み 抜 粋 ) 


<jbutton 1d= "btn"> ク リッ ク </but 上 ton> 
<d1iY><p わ > みか ん < /p></d1 ざ > 





JavaScript 


$(Eunction() { 
$("#btn") .on("c1ick", Eunotion() ({ 
$("p") .rep1aceWith ("<1mg src='1mages/orande .pnd'></1md>") 





リス ト 1233 は 、 ボ タン の click イ ベン ト で <p> 要素 を <imgz> 要素 に 置き 換え 
て いま す 。 ボ タン が クリ ッ ク さ れる と 、HTML が 次 の 状態 に 変更 さき れ ま す 。 


<d1v><1md SrC='1maqge8/oranqe .pn9'></ 1md></d1 マ > 
ぐ p> 要素 が <img> 要素 で 上 書き され る 
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si 麻 し 和 RI 
DOM 操 作 の 応用 


最後 に 、DOM 操 作 の 応用 例 と し て セレ クト ボッ クス の 操作 方 法 を 紹介 し ま 
す 。 リ スト 12.34 は 、 メ イン カテ ゴリ ー 一 覧 か ら 項 目 を 選択 する と 、 サ ブ カ テ ゴ 
リー 一 覧 が 一 新 き れる スク リプ ト で す 。 以 降 で スク リプ ト を 行 ご と に 詳し く 説 
明 す る た め 、TavaScript の ソー スコ ー ド に 行 番号 を 入れ て あり ます 。 








リス ト 18.34 セレ クト ボッ クス の 操作 
HTML ( く <body> 要素 内 の み 抜 粋 ) 


<!-- メイ ンカ テ ゴ リ ー --> 

<SeGlect 1d="main"> 

<option Va]ue="0">PC 本 体 </option> 
<option va1ue="1">PC 周 辺 機器 < /option> 


</ Se]ecC> 

<!-- サブ カテ ゴリ ー --> 
<SeG1ec 寺 1d="8uDb"> 
</ Se]1ec> 





JavaScript 


: $(function() { 
8etSubCateqdorY () : 
5 $ ("#ma1n" ) .on ( "Change " , SetSubCatedory) 』 
まり 
: Eunction setSubCategory() { 
Yar SubLigt = [ 
[ WW ノート 9 / ゅ タワ ー 型 W 一 体型 ! 閑 
[ wW マ ウス m キ ー ボ ー ド 『/ ま 三 タ 9 _ リス ピー カー『] 
] : 


Var 1 = $(" 叶 ma1n > option: selected" ) .Ya1 ( ) : 





Var SuD = $(" 提 Bub") : 
SuDb . empty ( ) : 


for(var ]=0: ] < subLhist [1] .1ength: ]++) 人 { 
Sub .append( "<opt1on Value='" リ + ォ イ + "リリ >! 二 賠 
SubList 上 [1] []] + "</option>") 


:} 
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一 実行 結果 


[3 avaScript の 練 首 X 竹 
を うぅ @ fle://C:/work7list12_34.html。。。 補 


pcke 講じ エー 





「PC 本 体 」 選択 時 「PC 周辺 機器 」 選択 時 


まず は HTML か ら 見 て いき まし ょ う 。 メ イン カテ ゴリ ー と サブ カテ ゴリ ー の 
2 つの セレ クト ボッ クス が あり ます 。 メ イン カテ ゴリ ー に は 項目 が 設定 され て い 
ます が 、 サ ブ カ テ ゴリ ー の 項目 は 未 設定 で す 。 

続い て 、 ス クリ プ ト の 処理 を 追っ て いき ます 。1 行 目 か ら 4 行 目 は Web ペ ー 
ジ が 表示 され た と き の 処 理 で す 。setSubCategory 関数 を 実行 し 、 さら に メイ ン 
カテ ゴリ ー の change イベ ント に setSubCategory 関数 を 登録 し て いま す 。 

5 行 目 以降 は setSubCategory 関数 の 処理 で す 。6 行 目 か ら 9 行 目 で は 、 サ プ ブ 
カテ ゴリ ー に セッ ト す る 項目 を 二 次 元 配列 で 保持 し て いま す 。 イ メー ジ と し て 
は 次 の よう に な っ て いま す 。 


サブ カテ ゴリ ー の 各 項 目 の value 属性 値 





メイ ンカ テ ゴ リ ー の 人 台 項 目 の value 属性 値 
次元 配列 


11 行 目 で 、 メ イン カテ ゴリ ー の 中 か ら 選 択 中 の 項目 を 取得 し 、value 属 性 の 
値 を 変数 i に 代入 し て いま す 。:selected フ ィ ル タ は 選択 され て いる 項目 の み を 
抽出 し ます 。「PC 本 体 」 選択 きれ て いる と き は 0 が 、「PC 周 辺 機器 ] が 選択 る 
れ て いる と き は 1 が 変数 i に 入り ます 。 

13 行 目 か ら 14 行 目 で は 、 サ ブ カ テ ゴリ ー の 項目 を すべ て 削除 し て いま す 。 こ 
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*AaJHaMIJAa< = ニュ (< 生還 生還 に アデ 生還 k 。。 we や eiw キ ホ 本 衝 ギ で WWAN ペ で やき そ ゃ AL また まあ すま きま た る は きた も や 4 まあ も まし LIL た あま まもる も LIL ん 9 あえ あし ああ た し まま EN だ た る た し あれ 上 まま お おま 相 人 まし た あし を) た LULLL た まま そま まま は コル あえ まま た お しみ うき まま ます は 2 ます SKI まま は さよ る る さき 生れ 2 等 症 人 
WW まず が WNWNMMNY まま 齋 .】 Ah アデ ーー オーー ii。4 MM ア ュ 、 KWWW ま AA 江 ザ WNWtWWY ポ ド NWTrYWNWNWNW す WWW キ ゃ や WWA bcuivt ル kk ILD とみ る る の あえ る ME ん ML に UL ん JJ に 5 ルルル も ああ ん ん あん ん ルル ん 4 も も も まる 3 ルル ん 上 5 ルル ます うま えみ あれ は SA は YR UN まま まさ ML IA RU INWWN キ すず 
WWWWWYWWWANWYN で 拓 | 。 / 5 3 
EAIL EE ん えり ma r 

ATMW 還 人 MWTWY WNW NTT 基 WWWWTNNWA <-% ず WWmwWhuemWn^Ah ゃ nmn プ YKNNWWNWNWAWNWNNNWWWNWN ドル まず ヤ MWAW リサ MMWPMWNRWTN 作 間 着 記 四 キ ルド WW ルル 失 すず RA 症 N ド WWWNNPINWNIWMWMPNNNWITNNNKANWNYANWNYNWMWNNTWNWNWTNTW ザ サ し 系 まあ JMALAMMLLNJAA2URULAUESRI RS TU RA WW 


の 処理 を 入れ て お か な いと 、 メ イン カテ ゴリ ー の change イベ ント が 発生 する た 
びに サ プ カ テ ゴ リ ー の 項目 が どん どん 増え て いっ て し まい ます 。 

16 行 目 か ら 18 行 目 で は 、 サ ブ プ カ テ ゴリ ー に セッ ト す る 項目 数 分 の 繰り 返し 処 
理 を 行なっ て いま す 。 メ イン カテ ゴリ ー が 「PC 本 体 」 だ っ た 場合 、append メ 
ソ ッ ド で 追加 され る の は 次 の 3 つの 要素 で す 。 


Sub.append("<option values!"+ ォ 0 + "Yo! + gubList[0] [0] + 列 
り </option>") 』 

Sub.append("<option values'"+ エ + "Is! + gubList [0] [1] + 列 
</option>") ぁ 

Sub append ("<option value='" + 2 + "!>" + gubList [0] [2] + 列 
</ODt 上 1on>『") 』 “ 





Sub.append ("<option value='0'> ノ ー ト </option>") 
sub .append ( "<option value='1'> タ ワー 型 </option>") 
Sub .append ("<option Value='2!> 一 体型 </option>") 





この 草 の 到 達 麻 チ ェ ッ ク 





0 1 以下 は 、 ぐ p> 要 素 、 も し く は 「hogel」 と いう ID を 持つ 要素 の 内 容 に 
"ABC" を 設定 する スク リプ ト で す 。 空欄 を 埋め て 完成 させ て くだ さい 。 


$( 中 | | 。.htm1 ( "ABC" ) 





⑩@⑳ 以下 は 、 ぐ button> 要 素 に 設定 され た すべ て の イベ ント ハン ドラ を 削除 
する スク リプ ト で す 。 空欄 を 埋め て 完成 させ て くだ さい 。 


$("button").| |(): 
⑳③ 以下 は 、 ぐ ul> 要素 内 の |> 要 素 す べ て に CSS ク ラス 「list」 を 追加 し 、 


さら に イン デック ス が ら 番 目 の 要素 に は CSS ク ラス 「highlight」 も 追 
加 す る スク リプ ト で す 。 空欄 を 埋め て 完成 させ て くだ さい 。 
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$("u1 > 1i") .addC1asgs("1ist")| | ("ieg(2)") . 可 
addC1asgs( "high1ight") 』 


⑳ 人 4 以下 は 、<button> 要 素 を クリ ッ ク す る た びに 、< ぐ div> 要 素 に CSS ク 
ラス 「box」 を 付け た り 外 し た りす る スク リプ ト で す 。 空 欄 A と B を 埋め 
て 完成 させ て くだ さい 。 


$ ("button") .on("[| A |", Eunetion() ( 
$("div").| B |("box"): 
}) : 


Q5 以下 は 、 く h1 > 要素 を く h ら > 要素 に 置き 換え る スク リプ ト で す (た だ し 
内 容 は 変更 し ませ ん )。 空 欄 を 埋め て 完成 させ て くだ さい 。 


<h1 >ABC<h1 > 


スク リプ ト 
$("h1 り [|  ]("<h2>ABC</h2>") 』 


⑳@6 以下 は 、 リ スト の 未 尾 に 項目 を 追加 する スク リプ ト で す 。 空欄 を 埋め て 
完成 させ て くだ さい 。 


<Uu] > 
<]1> パ ンジ ー</11> 
<11> ガ ー ベ ラ </1 ユ 1 は > 
<11> チ ュー リッ プ </1 ユ 1> 
</u1> 


スク リプ ト 
$("ul").| |("<1i> ひ まわ り </11>") 





⑳7 以下 は 、<ul> 要 素 が 持つ 子 要素 を すべ て 削除 し 、 ぐ ul> 要 素 の 後ろ に 兄 
弟 要素 と し て < く a> 要素 を 追加 する スク リプ ト で す 。 空 億 人 と B を 埋め て 
完成 させ て くだ さい 。 

$("u1").| A |().[ B ("<a href='index.htm1'> リ ンク </a>") 』 


ご 解答 は 巻末 に 掲載 
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A jaX 


この 章 で 学ぶ こと 
Ajax と は 
外部 HTML の 取得 
クロ スズ ド メ イ ツ 
JSON、JSONP 








昌 折 四 *19* 記 所 提 扶 持 持 提 提 提 半 提 0 提 朋 提 扶持 肝 肝 


ぐ Ajax は Web サ イト 間 の デー タ 通 信 の 手段 島 


通常 、 別 の Web サ イト の 情報 を し か し Ajax と いう デー タ 通 信 技 術 を 
表示 し た い 場 合 、 リ ンク な ど で 全う と 、Web サ イト の 一 部 に 
その サイ ト へ 移動 する 必要 が あり ます 他 サ イト の 情報 を 表示 で きま す 


また 、 通 常 JavaScript で は 、 Ajax を 使っ て 自分 の と ころ まで デー タ を 
異な る ドメイン (領域 ) か ら 持っ て き て も ら う こと が で きま す 。 
デー タ を 取得 で きま せん た だ し 、 自 分 の と ころ へ 呼ぶ の は 
デー タ を 取り に 行っ て も も ら え ませ ん が … | 統 用 で きる 相手 だ け に し まし ょ う 


Web サ イト B 





Ajax は Web サ イト 間 で 情報 を 効率 良く や り 取 りす る た め の 仕 組み で 、 今 日 
の Web 制 作 現場 で は 欠か せま せん 。 JavaScript で Ajax の 処理 を 記述 する 
と 複雑 に な り が ち で す が 、 jQuery を 使え ば 簡潔 に 記述 で きま す 。 
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Ajax と は 


エイ ジャ ックス 


Ajax (Asynchronous TavaScript + XML) は 、 ク ライ アン ト か ら サ ー バ ー 
に 対し て 非同期 通信 を 行なう 技術 の こと で す 。 非同期 と は 、「 あ る 処理 の 完了 
を 待た ず に 別 の 処理 を 並行 し て 行なう ] と いう 意味 の 言葉 で す 。 

Web 上 で デー タ を や り 取 りす る に は 、 ク ライ アン ト か ら リ クエ スト (要求 ) 
を 送っ て 、 サ ー バ ー か ら の レス ポン ス (返答 ) を 受け 取る 必要 が あり ます 。 具 
体 的 に は 、 ブ プラ ウザ か ら URL を 指定 し て サー バー に アク セス し 、Web ペ ー ジ 
が 読み 込ま れる まで の 一 連 の 流れ の こと を 指し て いま す 。 こ の よう な 通信 方 法 
を 同期 通信 と 呼び ます 。 同期 通信 で は 、 ク ライ アン ト は サー バー か ら の レス ポ 
ンス が 返っ て くる の を ひたすら 待ち 続け る し か あり ませ ん 。 し か し 、 非 同期 通 
信 を 利用 すれ ば 、 レ スポ ンス を 待機 し 続け る 必要 は あり ませ ん 。 そ の 間 ユ ー 
ザー は ブラ ウザ に 表示 され た Web ペ ー ジ を 自由 に 操作 で きま す 。 し か も 現在 の 
Web ペ ー ジ を 見 て いる まま で 移動 する こと も な く 、 別 の Web ペ ー ジ か ら 情 報 
を 取得 で きる の で す 。 


デー タ を 取得 中 
の Pi (70% 完了 ) Web サー バー 
デー タタ の 取得 が 完了 する まで 
ペー ジ を 操作 で き な い 









Loading..… 









テー タ を 取得 中 
(70% 完了) Web サー/ 一 

デー タ の 取得 中 で あっ て も 
ペー ジ の 操作 が で きる 





ee 


同期 通信 と 非同期 通信 
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ボド ず 者 や あす か 生 すず W オキ W キル ルコ WW  Y W 聞 生 内 
v 則 東和 4 よ デ ie WW WW すま ます) 
YJWMW ォ WNWW_ww _ し En W W ポ WW 『 
_- MM _- まま VN \ 「 N パ 
まま 用 ボル 半 WW mW+( た mw ポポ ドド WW 由 6 
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Ajax は 、 さ ま ぎ ざま な Web サ イト で 利用 され て いま す 。 代 表 的 な の も の が 
Google 検索 (http://wwwr.google.cojp/) で す 。 た と えば 、 検 索 キ ー ワ ー ド に 
「javascript a」 まで 入力 する と 、 検 索 ボ タン を 押さ な く て も 検索 結果 が 表示 さ 
れ ま す 。 さらに その 後ろ に 続け て |j] を 入力 する と 、 先 ほど と は 別 の 検索 結果 
が 表示 され ます 。 


年 * 人 き 委 htp /www.Ooogle coJp ww の =Cooole ひ み yr 


局 VaSCTID4 alef1 


選 VeSCnDI erTaY 

條 WSCTID( weverWisiemef 
財 VBSCTID( OU 

居 vaSCript ー 放 


を ャ ッシュ 
が 1 み '19720 - OM アラ ー ト は 健 和信 に メッ セー 1 に 用 いも の で は あり ーー OO JaYerrv 1 が と の よう も の か 得 屈 用 と し て ご 
yes ーWreeemo ム 和 基 んで いて エラー が 由 も 夫人 き に - で 便 間 っ て いも の か 8 ト た の で ぃ 【 て くだ さい 。 pv の ーッ apM 130 4 た << 
まま | も まえ し ます 、 そ ん た 新 で 使用 引 訂 が 病 い 材 生 で う En J@ で Q し 


WW WW (前 げ 

Fm 3 人生 し た う ィ ン ド ザウ に こ ツ zo2N 了 を Y。【o0* の 144 
て We アァ ログ WW も まで A の 第 理 に 追 人 が フウ ゾ そ を 地 作 し た り で きま で せ ae MILKReqwes に つい て わり りや すず ( 箱 詳 。 Jeva Scrip(* 和 用 し 
・ ダイ アロ グ に 表示 され る テキ ユ ト 械 人 行 する 場合 に eve の 7 を 入れ て To ー タ 次 村 で きる こと が 、 MtpRwveei を 用 





が て へ LO eriyn・ Ja や Wi 
2 に 委 い 3S 洲 CA 生 SSSGEET7 823 01 


この よう な 、 ユ ー ザ ー が 入力 を し て いる 裏側 で デー タ を 取得 し て き て くれ る 
快適 な シス テム は 、Ajax の 因 恵 に よる も の な の で す 。 


jaVaSCriDt a"' を 送信 






Google の 
Web サー バー 





JaVaSCrIDt a'" の 
検索 結果 を 返す 






バッ ク グ ラウ ンド で 非同期 通信 を 
行なっ て いる の で 、 続 け て 文字 を 
入力 で きる 







Google 検索 は Ajax の 非同期 通信 で 成り 立っ て いる 


以降 で は 、J]avaScript で Ajax を 使う 方 法 を 見 て いき まし ょ う 。 





Ajax に よる HTML の 読み 込み 


ある ペー ジ の 内 容 を 他 の ペー ジ に も 表示 し た いと き は 、Ajax で HTML を 読 
み 込 む Ioad メソ ッ ド が 便利 で す 。load メソ ッ ド は 、 読 み 込ん だ HTML を 要素 に 
挿 人 し ます 。 
ea Da メゾ ソ ッ ド の 書式 
要素 .1oad (" 別 ペ ー ジ の URL" ) 









リス ト 13.1 は 、info.html か ら HTML を 取得 し 、main.html の <div> タ グ 内 に 
挿入 する スク リプ ト で す 。 


リス ト 13.1 指定 し た ペー ジ の 内 容 を 読み 込む 
HTML1 main.html 


< !DOCTYPE html] > 
<htm1] lanqd="]a"> 
<head> 
<meta Char8e ヒ 上 ="utfF-8 リ "> 
< 上 1 上]e>JavaScCr1p 上 の 練習 </ 上 1 上 1e> 
<8C1p 上 gro="hEED : / /a]ax .doodg1eap18 .Com/a]ax/11Dbs/ 列 
]query/ 1 .9.1/]query .m1n .]8 "></ 8Cr1p 上 > 
< く 8C 了 1p キ > 
$(Eunction() { 
$(" 半 1inFoArea") .1oad( "1nfo.htm1") : 
)) : 
</ 8C エ 1p キ > 
</head> 
< くわ DOd> 
<d1iy 1d="1inFoArea "></d1 せ > 
</body> 
</htm1+ > 





HTML2 info.html 


< !DOCTYPE html] > 
<htm1] 1anq="]a リ "> 
<head> 
<meta Char8e ヒ ="utEF-8 リ "> 
< 上 1 上 1]e>JavaScr1p 上 の 練習 < / 上 1 上 1e> 


</head> 
<DOdQY> 
<p>12/27 て 1 / 4 まで お 休み し ます </p> 
</ body> 
</htm1l > 
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mw r @,| [file:///C: /work/main. html 


12/27 ン 1/4 ま で お 休み し ます 





main.html を 表示 する と 、main.html は info.html か ら HTML を 非同期 で 取得 
し て ペー ジ 内 に 表示 L。 ま 前 


<div 1d="1nfoArea『> 
<htm1> し 


内 1> (/ | 
こ / 9 _ レ > Info.html 


main. html 
実行 イメ ー ジ 





リズ スト 13.1 で は 、jHfO、 html の <title> や く meta> な どの 不要 な 要素 も 


_ 取得 し て し まっ て いま す 。Ioad メ ソ ッ ド は UHL の 後ろ に スペ ー ス を 空け 
て セレ クタ を 指定 する こと も で きる た め 、 ぐ p> 要 素 の み を 取得 し た い の で あれ ば 
次 の よう に 記述 し ます 。 


$("#1infoArea" ) .1oad("1info.htm] p"): 





本 書 を お 読み の みな さん は 、 ロー カル の パソ コン 上 で JavaScript の 実行 確認 を 
され て いる 方 が 多い で し ょ う (ロー カル と は 、 サ ー バ ー で は な く 自 分 の パソ コン 
と いう 意味 で す )。IE や Firefox で は 問題 あり ませ ん が 、Chrome を 使っ て いる 
場合 、|ogd メ ソ ッ ド で ロー カル ファ イル (自分 の パソ コン の ファ イル ) を 取得 
し よう と する と エラ ー が 発生 し ます 。 そ の 場合 は 、 次 の よう に し て 対処 し て くだ 
さい 。 
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《 Chrome の ショ ー ト カッ ト ア イコ ン 騙 の 上 で 右 ク リッ ク し て [プロ パテ ィ 
_(R)] を 選択 し ます 。 | “ 










開く ( ひ ) 
プア イル の 場所 を 開く (1) 





互換 性 の トラ ブル シュ ー テ ィ ン ガ (Y) 
ウイ ルス スキ ャ ン . .… 
タス ク バー か ら ピ ン 劉 め を 外す (K) 
送る (N) 


切り 取り (T) 
コピ ー(C) 


ショ ー ト カッ ト の 作成 (S) 









の Chrome の プロ パテ ィ 画 面 が 開く の で 、「 リ ンク 先 ] の chrome.exe の 後ろ に 
以下 を 指定 し ます (先頭 に 半角 スペ ー ス が 必要 で す )。 


Chrome .eGXxe" ーー| +・ 


exe' と - の 間 に 半 角 ス ペー ス が 必要 





| 全 | コート Netay| 
介 


| w w 
| 種類 : アプ ーション 





Google Chrome 


| 場所 : Application 
「 リン ク 先 (T): 「tionwhrome.exe" --allow-file-aooess-from-fles | | 


| 人 8 ルナ チ "て :wProgram Fles (x86)\Google\ChromewAppl | 
| コー ト か カト | 
キー{(K): as 





| 時 の | > 
| 大 き さ (R): 通常 の ウィ ンド ウ oc 
| コル NO): Access the Internet 


| | アイ の 志 を <() | アイ コ > の 変更 (C)。。| | 計 引 (D).。 | 





ぐ Chrome を 開い て いる 場合 は いっ た ん 閉じ て 、 シ ョ ー ト カッ ト ア イコ ン か ら 
再起 動 し ます 。 


も ちろ ん 、Web 上 に HTML フ ァイル を アッ プロ ー ド すれ ば 、 ど の ブラ ウザ か ら 
で も 問題 な く 実 行 す る こと が で きま す 。 
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_W Hatcigdiee ccir 凍 | 


⑳ 1 以下 は 、sample.html の HTML を 読み 込ん で く div> 要 素 に 挿入 する プ 
ログ ラム で す 。 空欄 を 埋め て 完成 させ て くだ さい 。 


$("div").| |("samp1e .htm1") : 
⑳2@⑳ sample.html か ら 取得 し た HTML の うち 「hoge] と いう ID を 持つ 要素 


の み ぐ div> 要素 に 挿入 する に は 、Q 1 を どの よう に 変更 すれ ば 良い で す 
か ? 





ご 解答 は 巻末 に 掲載 
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- 王 JSON と JSONP 








5 ( Me 


Web 上 で 利用 きれ る デー タ の 記述 形式 と 言え を ば XML が 有名 で す が 、 そ れ よ 
り も も っ と 扱い や すい TavaScript の た め の 記 述 形式 が あり ます 。 

JSON (TavaScript Object Notation) は 、 デ ー タ の フォ ー マ ッ ト (記述 形式 ) 
の 一 種 で す 。TavaScript で デー タ 通 信 を 行なう 際 の フォ ー マ ッ ト と し て 開発 さ 


れ ま し た 。 TSON 自体 は 単純 な 文字 列 で す が 、J]avaScript の オプ ジェ クト 下 ず オ に 
変換 し て 利用 する こと が で きま す 。 


JSON と は 












文字 列 型 JavaScript で オブ ジェ クト 型 
。 受け 取る 


{ "name" : "Earo" ) 








JSON は オブ ジェ クト 型 に 変換 され る 


TSON は 書き 方 が 簡単 な の で 、]avaScript は も ちろ ん 、 他 の スク リプ ト 言 語 
で も 楽に 扱う こと が で きま す 。 サ ー バ ー サ イド スク リプ ト か ら JavaScript へ 
デー タ を 渡す 場合 に は 非常 に 重宝 し ます 。 本 章 で は 、 サ ー バ ー サ イド スク リ 
プ ト で 作ら れ た Web API と いう 機能 を 使っ て サー バー か ら デ ー タ を 取得 する 
TavaScript を 作成 し ます (Web API の 詳細 は 後述 し ます )。 





サー バー サイ ド 


スク リプ ト 有 H に 1/c otei ll 91! 


JSON を 用 いた サー バー スク リプ ト と の 連携 
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。 NN W' や wwwveanWh を キャ す AWN ネ RWvS コ wW ホ FmYW ヤ MMMNMWW ま NT だ ト ギョ まま まま が MIW WNWJN.S +4 生 4 OS SR 3 エ ま と JI U WW\ 間 WW 表 人 0 まや _- REG bf 
が WW _- ボア ャ ) * こ マニ こと や ドド すず WW NE まま まま NN ル WWwYn キ ポポ ギザ や AA EE リル の 生ま WW が 症 っ の か 4 WWwwswwWP キ 着る も すま WWWFWW や き 1 時 WM ず N ポ W 交 UW 了 だ \ ず WWWWWW 4 W t twWWN4 キ ルル WW 
。 まもる も まだ い ト や WW た ルポ オヤ ネオ ペル WWNN ポ ネリ サヤ MAWN 和 NNWWNNWNN ネ ポル ド ザ ポリ W ま まず サ す NOwWNwVWWAtPNNWWNNWWNYWMNW ネ や すす 4 \ す WW す waNIT み つも WWYWT ル wW ポ ホキ ポト WW ポイ WNWYWYWNT WW 下す WW か か AIWWmW ま きま きり 定 WU 「 WAN ォ ー 
ー 
~、 由 _ WI ー まま NII ロ 「 W 器 D ・ _ ー _ W WW ネ M の 
Wl ず 衝 W も ず W あま ま WWWW WWWANNM * ・ N WWWAA 間 * w WW ー 0 WNW WW ま WNNWVhUw パ + 


JSON の 書き 方 と 取得 方 法 


JSON の 記述 方 法 は 、]avaScript の 配列 また は オブ ジェ クト と ほぼ 同じ で す 
が 、 必 ず プ ロ パ ティ 名 を ダブ ルク ォ ー ト () で 囲む 必要 が あり ます 。 シン グル 
クォート ( ) は 使え な い の で 注意 し て くだ さい 。]SON デー タ は 、get]SON メ 
ソ ッ ド で 取得 で きま す 。 








ea BtJSUN メソッド 





第 2 引数 の コー ル バ ッ ク 関 数 に は 、TSON の 取得 が 完了 レ し た と き に 実行 する 
関数 を 指定 し ます 。 こ の 関数 に は 、 引 数 と し て ]SON デー タ が 渡さ きれ ます 。 


5 シャ ーー 
ある 処理 の 完了 後に 実行 され る 関数 の こと を コー ル バ ッ ク 関 数 と 呼び ま 


す 。 た と えば 、 電 話 を か けた 相手 が 不在 だ っ た と き に 、 後 で 折り 返し て も 

ら う こと を コー ル バ ッ ク と 言い ます よね 。 そ れ と 同じ 考え 方 で 、 コ ー ル バッ ク 関 
数 を 引数 と し て 渡し て お く と 、 後 か ら 関 数 を 実行 し て も ら う こと が で きま す 。 今 
回 の 処理 に 当て は め る と 、[⑩getJSON メ ソ ッ ド を 呼び 出す 」 一 「@getJSON 
メソ ッ ド の 処理 が 完了 する の を 待つ 」 一 「@ コ ー ル バッ ク 関 数 が 実行 され る 」 と 


いう 流れ で す 。 


で は 、TJavaScript で JSON を 取得 する 例 を 見 て み ま し ょ う 。 


リス ト 13.2_ JSON ファ イル の 取得 
JSON item.json 


WCOQe" : "0001%。 
Wnmam6" 。 : "WEV-029 


の 名 。 上 500 


"Code" 5 "00027,/ 
"8 : の NRKR-07 リ "。/ 





リ わ 1C@ LU 


WCOCGT  。 "OO003『。 
!name" 。 : "WWR-03『/ 
ptLCe" : 3500 


HTML index.html (省略 部 分 は リス ト 13.1 の main.html と 同じ ) 


<!DOCTYPE htm1] > 
( 略 ) 
< く 紀 C エ ユエ p キ > 
$ (funoction() { 
$ .getJ8ON( "1tem.]8on" / 
Eunction (data) { 
for (var 1=0z 1<data.1engthz 1++) { 
$ ( "#dataTab1e" ) .append ( "< ヒエ ></ 上 > リ ) 

まま 中 ( も: LA8 も 『) 
・append( "<td>! + data [1] .code + "</ 上 d>" ) 
・append ("<td>" + data [1] .name + "</ 上 d>" ) 
・append( "<td>" + data[1] .price + "</t 上 d>")』 


} 
) 


)) 


</ 8C エ 1p キ > 


</head> 
<DOdY> 
<tab1e 1d="dataTab1e リ "> 
< 上 >< 上 h>cCode< / 上 h><th>name</ 上 h>< 上 h>D エ 1Ce< / 上 h>< / 上 エ > 
</tab1e> 
</ body> 
</htm1 > 


JavaScript の 綾 玉 
を ふみ @ 届 file:///C:/work/index.html 


code name priCe 
0001 EV-02 1500 
0002 NR-07 2500 
0003 WR-03 3500 
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。。。 saam ュ ーー ュ 二 生生 省 器 / 人間 較 朋 ココ ィ ー ド ドー ドー ド | ・ や 人 あ WWw 症 本 WW ポ 全 WW すす まさ すり を RINESY RY を 叶 生 間 0 
Ph4NPD'T 。 サル 。 や サザ アー ペー アヤ 年 衝 東 せ 市 導 。 - です いひ な で 0 か の で で で の ので で で すり で で で で イツ W: 吾 A 
か Py る 1 で w Mu AN WW WW WWAWWWtAMWWwwww み vV ャ WM W WANWWWWA 

】 _。 こ v きま まあ WANNA 0 上 まま ま まま 半 W < 衣 表 朋 . 表し 、。 WW N 有 NM N ま 

PO で で EE IF a MAI 

W か ず 愉 WMwwW At AwWwWw や mWWFYAWWW ゃ WNWW ゆ 人 ル WNWWWW ル Mg MPPDT ゲ DP で か りら PO の の すい の ドサ で で が v 


リス ト 13.2 で は 、3 件 の オブ ジェ クト を 要素 と し て 持つ 配列 形式 の JSON を 取 
得 し て いま す 。 ス クリ プ ト の 堆 の 部 分 が コー ル バ ッ ク 関 数 で す 。 JSON が 取得 
され る と TavaScript の デー タ に 変換 され 、 コ ー ル バッ ク 関 数 の 引数 data に 渡さ 
れ ま す 。 関数 の 中 で テー ブル の デー タ 行 を 生成 し 、 受 け 取 っ た デー タ を セッ ト 
し て いま す 。 


⑯ JSON を 要求 
<tab1e 1d="dataTab1e"> 


4 JSON デー タ 
</tab1e> 





の JSON を 返却 で 
Index.html (コー ル バ ッ ク 関 数 が 実行 され る ) Item.jSon 


リス ト 13.2 の 処理 の 流れ 


この スク リプ ト で は 、 次 の よう に TSON デー タ か ら TavaScript デ ー タ へ の 変 
換 が 行なわ れ て いま す 。 


reode" : "0001『/ 
name" : "EV-02『, 
いす (ia 衣 設 加古 いい 


wcode" : "0002『,/ 
name" : "NR-07『/ 
9 の oe" 。 2500 


moode" : "0003『。/ 
Iname" : "WR-03『/ 
WpDrice" : 3500 





Pe > 
衣 骨 陣 
4 





datga 
リス ト JSON デー タ か ら JavaScript デ ー タ へ の 変換 
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JSOINP と は 


]avaScript で は 、 セ キュ リティ 上 の 2 イ ン の サイ ト か ら デ ー 
タ を 取得 で き な い 仕様 に な っ て いま す 。 し か し 、 JSONP と いう 方 法 で デー タ 
を や り 取 りす れ ば 、 別 ドメイン の Web サ イト か ら で も デー タ を 受け 取る こと が 


で きる よう に な り ま す 。 


よ の 0 を ドメイン と 呼 り ます 。 また 
な うこ こと を クロ ス ド メ イン と 呼び ます 。 





と 【 ド メイ ン 】 
人 WMWFUDOP PR 
異な る ドメイン 問 で デー タ 通 信 を 












JSONP の 場合 、 ど の よう な 手段 で 通信 を 行なっ て いる か を 簡単 に 説明 し ま 
し ょ う 。 ドメイン が 異な る サイ ト か ら は デー タ が 得 ら れ な いた め 、 逆 に 自分 の 
サイ ト に デー タ を 持っ て き て も ら お う 、 と いう 仕組 み に な っ て いま す 。 


外部 Web サイ ト 





通常 の デー タ 通 信 | 





(ドメイン B) | 






getJSON メソ ッ ド を 


自身 の Web サイ ト | メス 
人 E28020 | フー が 発生 する 








aki aa ンー sd 


ーー ツー ーー 
mm mw 


⑩ 関 数 名 を 


Oo 
名 前 の 関数 を 公開 する の で 伝え る 
そちら か ら 実 行 し て / NONE 
8 幸い 7 な さい 和 大 Wi 泊 コ N N XY 
II 
の JSON を 引数 と し て CD 


関数 を 呼び 出す 了解 | ) 


ーーー 
ee 
















| ユー Web サイ ト | 
(ドメイン A 8 






通常 の デー タ 通 信 と の 違い 
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0 wNNMN WW ネネ WNW MS N ギ や WV WNWATWWN WNWwWWANWWN ギ WWYwW*w ネ wwW キ ポキ ボボ 全 まで WW か や エ ず ま 

WNW ャ Y ポ WT WI *・ MAY や ネリ を へ で YNK きず 販 や 才 WWWPW 和 中 削 古 球 * W ネネ _ * * 
WWWNWYWWWwWMNNW ザ YA -。 まる も まとう 1 や ず NNWN ポ NW ず WNW も WWNWNAN 要 ftYW _ 0 * ま W せ ルポ * 
WNWWW ゃ や ATNJ ・ 時 aa 中 ー 「 ま | FE) 1WNWANRNPW ギ AN 四 8 WW や 還 W 所 必 衝 NWT 
WhNNNNNAN ば TYPNN NMWWNW 、 作 WWENMW WW WW W 4A 表す で YwMWWWUNNAnWNNYNWAWWVWW _ まま たま _ 
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Web API と は 


Web API と は 、 イ ンタ ーネット を 介し て 利用 する こと が で きる 機能 群 の こと 
で す 。Google や Yahoo な どの Web サ ービス の 配信 元 が 、 サ ービス を 活用 する 
た め の Web API を 提供 し て いま す 。 こ こ で は 、 そ の 中 で も 有名 な Twitter API 
を 利用 し て み ま し ょ う 。 Twitter API は JSONP に 対応 し て いま す 。 リ クエ スト 
パラ メー タ と し て 検索 キー ワー ド を 指定 で きる た め 、 気 に な る ツイ ー ト を 取 待 
で きま す 。 















デー タダ タ 
Twitter の 
配信 元 サ ー バ ー 
イン ター ネッ ト を 介し て 
Twitter の 機能 を 利用 で きる 
クラ イア ント 
Twitter AFI 


JSONP の 利用 


JSONP を 利用 する に は 、JSONP を 提供 し て いる Web サイ ト に 対し て コー ル 
バッ ク 関 数 名 を 伝え を ます 。 コ ー ル バッ ク 関 数 の 名 前 は 、 リ クエ スト パラ メー タ 
(URL に 付け て 渡す 引数 ) と し て 相手 に 渡し ます 。 リ クエ スト パラ メー タ は 、 
次 の よう に URL の 末尾 に 「?」 を 挟ん で 指定 し ます 。 パ ラメ ー タ が 複数 ある 場 
合 は る で つなげ ます 。 





リク エス トバ パラ メー タ の 指定 
URL? パ ラメ ー タ 1 = 値 1 を パラ メー タ 2= 値 2 


JSONP を 利用 する 場合 、 コ ー ル バッ ク 関 数 は 通常 、 次 の よう に 指定 し ます 。 


コー ル バ ッ ク 関 数 の 指定 
ca11back= 関 数 名 


た だ し 、 jQuery の 場合 は 関数 名 を 指定 する 必要 が あり ませ ん 。 次 の よう に 
callback パ ラメ ー タ の 値 と し て |「?」 を 渡す と 、getjSON メソ ッ ド で 指定 し た コー 
ル バ ッ ク 関 数 に 置き 換え られ ます 。 


[Query に よる JSONP の 利用 


$ .getJS8ON ( "JSONP の URL?ea11bacjk=?", コー ル バ ッ ク 関 数 ) 





※ 以 下 の ソ ー ス コー ド は 、 本 書 の 刊行 後 、TwitterAPI の バー ジョ ン ア ッ プ に より 動作 し な く な り ま し た 。 
2015 年 5 月 現在 、 代 替 コ ー ド を 上 弊社 Web サ イト の 本 書 の ペー ジ (追加 情報 ) に 掲載 し て お り ま す 。 

リス ト 13.3 TwitterAPI の 利用 

test.html (省略 部 分 は リス ト 13.1 の main.html と 同じ ) 


<!DOCTYPE htm1] > 
( 略 ) 
< く 8C エ 1 エキ 上 > 
$(funoction() { 
var qd = encodeURTComponent ("アシ アル 株 式 会 社 ") : 
$ .getJ8ON ( "htEDp : / / search .twitter .com/search. 凡 
]son?ca11back=?&q=" + dz 
function (data) { 
for(Var 1=0: 1<data.resu1ts.1engEth: 1++) { 
$("table") .append ( 
9 の oo 、 
! り < 上 d><1md SrC='" + data.resu1ts [ ュ ] . 凡 
prof11e 1mage ur + "!></ モ Ed>" + 
"<td>@" + data.resu1t8 [1] .frOom uSer + 
スコット 
"<td>" + data.resu1ts [1] .from user name + 列 
大 可 ト か ・ 
< 上 d>" + data.resu]tg [1] .text + "</t 上 d>" + 
りり / 上 >! 


) 
})) 
< く / 8C エ 1p キ > 
</head> 
<DOdY> 
<tab16e> 








331 





332 





っ 電 aWh a 
<th> プ ロフ 画像 < / 上 h> 


<th> ア カウ ント </th> 
<th> 名 前 < / 上 h> 
<th> ツ イー ト </th> 
に 半 人 ee 
</tab1e> 
</ body> 
</htm1l > 





画 実 行 結果 


| ] JavaScript の 習 

eb の 9 ロ fle:///C:/work/test.html 間 間 間 間 T 

記 フ アカ ウン ト 名 前 ツイ ー ト 

ke Ryoichi あり が と う ご ざ いま す ! RT @swwwwa mm ブレス リリース | アシ アル 

SuKadar Tsukada 株 式 会 社 http//tco/wqD4G8 廊 
2 < わ が る 9 人 イー 交 本 部 
1 がり デ http//t co/L6v 
| 生 OTE3 で も 大 丈 天 Ab ワ イト の 作り 方 や くみ パイ メー ジ で 


きる Web ブ ログ ラム を 必要 と し て 
も う 入 荷 し て る そう で す 。 RT の ー 0 プロ グラ ミン グ が 本 職 で は 
e Ryoichi Web サ イド が 作れ る PHP の 超人 入門 書 つ イ ン ブ スジ ャ パ 
Pa Tsukada ン の 刊 イ ラス ト で よく わか る PHP (は じ し の て の Web プ ロ ラミ ング 入 
ま 。 本 雄樹 | アン アル 株 式 会 社 著 ) が 、 入荷 し まし た 。 
ログ ラミ ング が 本 職 で は な い 方 に も 、 Web し 191 る PE の 衣 


和書 イン プレ スジ (C) 刊 『 イ ラス ト で よく わか る PHP (は じ め 
の Hr ホキ て ETEPT の web プログラミング 入 門 』 (岡本 雄樹 アン アル 株 式 会社 著 ) が 
和 社 ま し ee 


と て も 便利 な JSONP で す が 、 利 用 する 際 は セキ ュ リ ティ に 注意 し な けれ ば な 
り ま せん 。]SONP を 提供 する 側 に も し 悪意 が あっ た 場合 、 コ ー ル バッ ク 関 数 の 
引数 と し て コン ピュ ー タ に 害 を な す ス クリ プ ト を 渡し て くる 可能 性 な ども 考え 
られ ます 。 外部 か ら 関 数 を 利用 され る と いう の は 決し て 軽く 考え て 良い こと で 
は あり ませ ん 。 ま ず は JSONP の 提供 者 が 信用 で きる 相手 か どう か を 事前 に 確 
認 し 、 信 用 で きる 場合 の み 利用 する よう に し まし ょ う 。 


同一 ド メイ ン か ら は HTML や JSON を デー タタ と し て 取得 する 
こと が で きる 。 


外部 ドメイン か ら デ ー タ を 受け 取る 必要 が ある 場合 は 、 
JSONP を 利用 する 。 





この 草 の 到 達 麻 チ ェ ッ ク 


⑳ 1 同一 ドメイン 内 の Web サ イト か ら JavaScript で デー タ を 受け 取る と き 
に 適し た デー タフ ォ ー マ ッ ト は な ん で すか ? 

⑳@ 外部 ドメイン の サイ ト か ら JavaScript で デー タ を 受け 取る と き に 適し た 
デー タフ ォ ー マ ッ ト は な ん で すか ? 

⑳③ 以下 は 、data.json を 取得 する スク リプ ト で す 。 空 欄 を 埋め て 完成 させ 
て くだ さい 。 


| |("data.〕son", function (data) { conso1e.1og(data) : }): 


94 以下 の JSON は 誤っ た 形式 で 記述 され て いま す 。 間 違っ て いる ポイ ント 
を すべ て 挙げ て くだ さい 。 


{ name : !yamada', age : 25, hobby : 'swimming' } 


⑳⑩ 異な る ドメイン 間 で デー タ 通 信 を 行なう こと を な ん と 呼び ます か ? 


⑳@6 getJSON メ ソ ッ ド で JSONP を 取得 する に は 、 リ クエ スト パラ メー タ 
と し て な ん と いう パラ メー タ 名 と 値 を 渡せ ば 良い で すか ? 





ご 解答 は 巻末 に 掲載 
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ョ ヨン 


5 イノ ャ <- の ヤー 
表示 ン / 非 表示 の 切り 替え 
独自 アニ メー ショ ン の 設定 
スラ イド ショ ー の 作成 













ddo hm 


か 4 サッ も WCt4YYyt4yYYTt 人 YA トナ サル MTT か T が 8 
8 R は 時 / ョ ヨン 2 4 扶 は は お は け 【 2 KANYEYYGTTDDUISKKKEACECGOUYEKK 衝 Ny け 桂 社 に 4 が 1 
_ 第 14。 居 マー ッ > 本 は 守 提 は 扶 提 8 折 4 提 4 2 27332 CZKENNDEEHACETSXKKK3 人 OKULCUNYDXKI は 0 桂 太 信 は 


jQuery に は 、 ア ニメーション を 
作成 する 機能 も 用 意 さ れ て いま す 。 
た だ ど えば 、 
表示 を 交互 に 切り 替え た り … 


1 


"Web ペー ジ に いろ いろ な 動き を | 
つけ て み ま し ょ う と 


7 





以前 は Web ペ ー ジ の アニ メー ショ ン と いえ ば Flash が 主流 で し た 。 し か し 簡 
単 な ア ニメーション な ら 」jQuery で も 十分 実現 で き 、Flash より も 手軽 で コス 
ト が か か り ま せん 。 そ の た め 、 最近 で は jQuery で アニ メー ショ ン を 制作 する 
ケー ス が 増え て いま す 。 
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和信 表示 状態 の 切り 替え 





9) アニ メー ショ ン と エフ ェクト 


第 12 章 で は 要素 の 表示 〆 非 表示 を 切り 替え る た め に CSS の display プロ パ 
ティ を 設定 し まし た が 、 jQuery に は 要素 の 表示 状態 を 操作 する メソ ッ ド 群 が あ 
ら か じ め 用 意 さ きれ て いま す 。 各 メソ ッ ド に は 引数 と し て アニ メー ショ ン 速 度 ( 要 
素 の 表示 速度 ) を 指定 で きる た め 、 画 像 な ど を 切り 替え る 際 に Web ペー ジ に 動 
き を つけ る こと が で きま す 。 つ まり 、Web ペ ー ジ 上 で 簡単 な アニ メー ショ ン を 
実現 で きま す 。 

各 メ ソ ッ ド の 違い は 、 エ フェ クト に あり ます 。 エフ ェクト と は 、 ア ニ メ ー 
ショ ン の 動き 方 の こと で す 。 本 人 節 で は 、3 種 類 の 異な る エフ ェクト を 紹介 し ま 








@ 左上 を 基点 に 切り 替え る 
@ 上 下 に スラ イド する 
@ ぼ ぽ ぼんやり 透け て いく 


ぺ め 左上 を 基点 に 切り 替え る 
ー Show / hide ノノ toggle メソ ッ ド 


show メ ソ ッ ド で 要素 を 表示 し 、hide メ ソ ッ ド で 要素 を 非 表 示 に し ます 。 
toggle メ ソ ッ ド は 、 呼 び 出 され る た びに 要素 の 表示 状態 を 交互 に 切り 替え ま 
す 。 表 示 状 態 が 変更 され る まで の 見 た 目 の 移り 変わ り を 、 ア ニメーション と し 
て 表示 し ます 。 こ れ ら の メソ ッ ド は 要素 の 左上 を 基点 と し て 動作 し ます 。 


ms ShOW メソ ッ ド 
要素 . show (速度 ) : 
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Ws hide メソ ッ ド 
要素 .hide (速度 ) : 


TO5 戸 BB メソッド 
要素 . togg1e (速度 ) : 


引数 (速度 ) に は 、 表 示 状 態 の 切り 替え が 完了 する まで に か か る 時 間 を 指定 
し ます 。 ミ リ 秒 単位 の 数 値 か 、 以 下 の 固定 値 の うち いずれ か を 指定 し ます 。 





@ "SIlOW「………… 遅い (600 ミリ 秒 ) 
内 "normal" osseee 普通 (400 ミ リ 秒 ) 
の "fast" ee 束 し い \ (200 ミリ 秒 ) 


な お 、 引 数 を 省略 し た 場合 は 即座 に 表示 状態 の 切り 替 え が 行 な われ ます 。 
で は 、 こ れ ら の メソ ッ ド を 使っ て 、 育 景色 の 表示 状態 を 切り 替え る 例 を 見 て 
み ま し ょ う 。 


リス ト 14.1 表示 状態 の 切り 替え 
HTML lisSt14_1.html 


<!DOCTYPE html > 
<html] lanqd="]a"> 

<head> 

<meta Char8e ヒ ="utF-8 リ "> 

< 上 1 上 1e>JaVaScCr1p 上 の 練習 </ 上 1 上 1e> 

< く 8C エ 1p 上 gro= "hp : / /a]ax .doodgl1eapis .cCom/a]ax/11ibs/ 別 
]query/ 1 . 9 .1/]query .m1n .]8 "></ 8C エ 1p セ 上 > 

く 8C エ 1 エキ > 

$(Eunotion() ({ 
$("#open") .on("c1ick", function() { 


)) 7 

$("#c1ose") .on("c1iok", funotion() { 
$("#b1ock" ) .hide( "norma1") 

)) : 


}) : 
</ 8C エ ュ 1p キ > 
<11ink re]="stylesheet" tyDe="tex 上 /css" href="8t 上 ye .C88 リ "> 
</head> 
<DOdQY> 


$("#b1ock" ) .ghow ( "norma1") 』 





<dd1 ざ > 


<button 1d= "open "> 展開 する < /button> 
<button 1d="c1ose "> 隠す < /button> 
</d1Y> 
<d1iV 1d="b1ook" ></dV> 
</ body> 
</htm1 > 


CSS style.css 


#b1ock{ 
backqdrOunmd-CO1Or : D1nK: 
width: 200px: 
heiqght: 100Dx: 







9 [展開 する ] を クリ ッ 
ク す る と 、<div> 要 素 
が 左上 か ら 右 下 へ 向 
か っ て 表示 され て いく 


する と 、 こ dlv> 要 
素 が 右 下 か ら 左 上 へ 
ペー ジ を めく る よう 
に 消え て いく 


リス ト 14.1 で [隠す ] を クリ ッ ク す る と 、 ピ ンク の <div> 要素 が 左上 の ほう 
に 吸い 込ま れる よう に な く な っ て いき 、 最 後に は 完全 に 消え て し まい ます 。 逆 
に [展開 する ] を クリ ッ ク す る と 、<div> 要素 が 左上 か ら 右 下 へ 伸び る よう に 
表示 され て いく の が 確認 で きる で し ょ う 。 
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WW we を WE WW や = Wa コザ や:W 1 wwJY wi4 _ 「 AN すず W キオ _ 5。 4 まま 
wwW 涼 ず 斉 凍 ww ょ TTYT LT T 且 生 『 下 が w 全 尼 各 II 0 ず パ ww 
みみ ナ ポ ド WMWN ギ ルポ PD か # 芋 せ 0 - 回 * リル ーー 6 還 刺 靖 - 0 _- _- ト 旧 み 
- UE まま まお _ ーー N ザ WW か ーー・ ォ WW * ます キリ IM _- - 「 _- 
- WANNWNNWNNNN 全音 AL まひ よし A 生ん る LN 」 5 、A 4【。 
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掛け 部 分 ) を 中 心 に 掲載 し ます 。 


We 以降 の サン フル コー ド で は 、 <body> 要素 と JavaSoript ( リ スト 14 ] W 


続い て 、 こ れ と 同じ 効果 を 1 つの ボタ ン で 実現 する スク リプ ト を 見 て み ま 
|, ま 導 。 


リス ト 14.2 表示 状態 の 切り 替え 
HTML (<body> 要素 内 の み 抜 粋 ) 


<dd1 び > 
<button 1d= "switch" > 切り 替え < /button> 


</d1 ざ > 
<d1iV 1d="b1ock "></d1 せ > 





CSS style.css 


#b1ock1{ 
backqround-Co1or : D1nK: 
widthb: 200Dx: 
height: 100Dxz: 





JavaScript 


$ (function() { 
S(" 電 8w1tch" ) 。on ("Ci1Ck" ,。 funCt1on ( ) { 
$ ("#b1ock" ) toqg1e ( "norma1")』 


}) : 


)) 





リス ト 14.2 は 、[ 切 り 堆 え ] ボタ ン が クリ ッ ク さ れる た びに 痛 景 色 の 表示 ン 非 
表示 を 切り 替え る スク リプ ト で す 。 イ ベン ト の 発生 元 が 同じ 場合 (この 場合 は 
[切り 替え ] ボタ ン ) は 、toggle メ ソ ッ ド を 使っ た ほう が すっ きり と 記述 で きま 
す 。 


上 下 に スラ イド する 
の ② ー slideDown / slideUp メソッド 


sliideDown メ ソ ッ ド で 要素 を 表示 し 、slideUp メ ソ ッ ド で 要素 を 非 表 示 に し ま 





す 。 実行 する と 、 要 素 が 上 下 に スラ イド する よう な 動作 を し ます 。 
引数 に 指定 で きる 値 は show ノ hide メ ソ ッ ド と 同様 で す 。 引 数 を 省略 し た 場 
合 、 速 度 は "normal に な り ま す 。 


8 clidBDOWn メ ソ ッ ド 
要素 . g11deDowm (速度 ) 


8 clidGUD メソッド 
要素 . s11deUp (速度 ) : 







リス ト 14.3 は 、<div> 要素 を 上 下 に スラ イド し な が ら 表 示 の 切り 替え を 行 な 
う ス クリ プ ト で す 。 


リス ト 14.3 上 下 に スラ イド する アニ メー ショ ン 
HTML (<body> 要素 内 の み 抜 粋 ) 


<dd1 ざ > 
<button 1d= "open "> 展開 する < / but 上 ton> 


<jbutton 1d="ocl1ose "> 隠す </jDbutton> 
</d1> 
<d1iV 1d="b1ock">< /d1Y> 





CSS style.csSS 


#b]ock{ 
backqground-CO1or : D1nk』 
width: 200Dx: 
heiqht: 100Dx: 





JavaScCriDpt 


$ (Eunoction() { 
$ ( "#open") .on("C11CK"/ Function ( ) { 


$ ("#b1ock" ) . 証 ま eDown ( "norma1") : 
)) 7 


$(" 守 Cloge『) 。on("C1ickK"/ Function ( ) { 
$("#b1ock" ) . 宣 HeOB ("norma1") : 
}) 
}) : 
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画 実 行 結果 





9② [展開 する ] を クリ ッ 
ク す る と 、 <div> 要 素 
が 上 か ら 下 へ 表示 され 


て いく 





ーー ツー ペー ニー ーー ニー ニーバ ーーーー ーーーーー ペ ーー ーー 一 ーーー ーー ニーーーーーーーー ーーーーー- ーーーーーーーーーーーーーーーーーーー ーー ペー ーー テー ニー ニー ニー ニー ニーーーーーーーーー ーーーーーーーー ーーー- 





⑩ [隠す ] を クリ ッ 
ク す る と 、< く div> 
要素 が 下 か ら 上 へ 
消え て いく 


ほん や り 透 け て いく 
の ー fadeln / fadeOUut メ ソ ッ ド 


fadeIn メ ソ ッ ド で 要素 を 表示 し 、fadeOut メ ソ ッ ド で 要素 を 非 表 示 に し ま 
す 。 有 要素 の 位置 や サイ ズ は 変わ ら ず 、 箕 明 度 の み が 変 化し ます 。 実行 する と 、 
要素 が その まま の 位置 で ぼん や り と 和 備 け て いく 様子 が 確認 で きる で し ょ う 。 

引数 に 指定 で きる 値 は show / hide メ ソ ッ ド と 同様 で す 。 引 数 を 省略 し た 場 
合 、 速 度 は normal' に な り ま す 。 








要素 . FadeOut (速度 ) : 


画像 の 表示 と 非 表 示 を 行なう 例 を 見 て み ま し ょ う 。 





リス ト 14.4 透明 度 が 変化 する アニ メー ショ ン 
HTML (<body> 要素 内 の み 抜 粋 ) 


<d1 ざ > 

<button 1d= "open "> 展開 する </button> 
<button 1d="cC]1ose "> 隠す </bDu 上 上 On> 
</d1 せ > 

<1mg 8ro="1made8/fFrod1 . pd "> 





JavaSgcCript 


$(Eunction() { 
$ ("open") .on("c1ick", Eunotion() { 


$ ("1mg" ) . 刀 Adem ( "norma1") : 
}) 


$("#c1ose") .on("c1ick",。 funotion() { 


$ ("1mg" ) . 叶 adeOut ( "norma1" ) 
)) 








だ ん だ ん 透明 
に な っ て いく 






# 
ぶ 時 * 
ミ f 

に 





p 要素 の 表示 状態 を 切り 替え る と き に アニ メー ショ ン を 設定 する 


こと が で きる 。 
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Bet:dtee vccir 還 | 


Q 1 実行 する た びに <img> 要素 の 表示 状態 を 切り 替え る に は 、 空 欄 に な に を 
記述 すれ ば 良い で すか ? 


$("im").[ 10: 


⑳ る ⑳ <img> 要素 を 1 秒 か け て 徐々 に 薄く する に は 、 空 欄 に な に を 記述 すれ ば 
良い で すか ? 


$("img") .fadeOout([|  )): 





ご 解答 は 巻末 に 掲載 
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animate メソ ッ ド に よる アニ メー ショ ン 


独自 アニ メー ショ ン を 設定 する メソ ッ ド を 使え ば 、 エ フェ クト を 自由 に 設定 
で きま す 。 

animate メ ソ ッ ド は 、 作 成 者 が 自由 な 動き を 指定 で きる メソ ッ ド で す 。 組み 
込み エフ ェクト と し て 用 意 き され て いな い 動き を 与え た い 場合 に 利用 し ます 。 


% anirmate メソ ッ ド 


要素 。an1mate( { CSS プ ロ パ ティ 群 } , 速度 。 イー ジン グ , コー ル パ ッ ク 関 数 ) 
第 2 - 4 引数 は 省略 可能 


animate メ ソ ッ ド は 、 現 在 の 要素 の 状態 か ら 、 第 1 引数 で 指定 し た スタ イル 
が 適用 され る まで の 変化 ル ア ニ メー ショ ン と し て 表示 し ます 。 変化 する 速度 は 
第 2 引数 で 指定 し ます 。 

第 3 引数 の イー ジン グ は 、 ア ニメーション の 実行 速度 に 緩急 えつ ける も の で 
す 。 次 の 2 つの うち どちら か を 指定 し ます 。 






@ "linear" …… 一 定 速度 で 動く 
@ "Swing  …… 出だし は 遅く 、 後 半 は 速め 


第 4 引数 に は 、 ア ニメーション が 完了 レ した タイ ミン グ で 実行 する 関数 を 指定 
し ます 。 第 2 引数 以降 は 省略 が 可能 で す 。 
簡単 な た ア ニメーション の 例 を 見 て み ま し ょ う 。 
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リス ト 14.5 独自 アニ メー ショ ン の 実行 
HTML (<body> 要素 内 の み 抜 粋 ) 


<dQ1 ざ > 
<button 1d="1arge "> 拡大 </button> 


</d1Y> 
<1md SrC="1maqes/fFroq1 .]pg" 1d="photo" width="20%" height="20 を "> 





JavaScCript 


$(Eunction() { 
$ ("1arge") .on("c1ick", funotion() { 
$ ( "#photo" ) .animate({ 
fW1QEh『 。 :。 90 も 『/ 
Wheiqht" : "90*" 
),。 2000, "1inear") 』 





[拡大 ]】 を クリ ッ ク す る と 、 右 下 へ 向かっ て 拡大 拡大 終了 
し て いく 


リス ト 14.5 は 、 画 像 を 拡大 する アニ メー ショ ン で す 。 ま ず 、 画 像 の 初期 サイ 
ズ は ウィ ンド ウサ イズ に 対し て 209% に 設定 され て いま す 。 


<img sro="1mages/frog1 .]pg' 1d="photo' 朗 E209W henghtn20sra 


[拡大 ] ボタ ンク リッ ク 時 の 処理 で 、 画 像 に 対し て アニ メー ショ ン を 設定 し て 
いま す 。 第 1 引数 は 、 要 素 に 適用 する スタ イル で す 。 width、height と も に 90% 
を 指定 し て いま す 。 初期 サイ ズ か ら こ の サイ ズ に な る まで 変化 し て いく 様子 
が 、2 秒 間 の アニ メー ショ ン と し て 表示 され ます 。 





$ ( "#photo" ) .animate({ 
width" : "90%", 
nheight" : "90%" 

},。 2000, "1inear") 』 





文字 色 や 背景 色 な どの 色情 報 を 値 と し て 持つ CSS フロ デイ 内 animate メ ソ ッ 
ド で 変化 させ る こと は で きま せん 。 


animate メソ ッ ド に 対す る メソ ッ ド チェ ー ン 








animate メ ソ ッ ド を メソ ッ ド チェ ー ン で つなげ る こと で 、 ア ニメーション を 
段階 的 に 実行 で きま す 。 

リス ト 14.5 の スク リプ ト に 以下 の 記述 を 追記 する と 、 一 度 大 きく な っ た あと 、 
再び 元 の 大 き さ に 戻る アニ メー ショ ン を 作る こと が で きま す 。 


リス ト 14.6 animate メソ ッ ド の 段階 的 な 実行 


$ (Eunction() { 
$ ("1arge") .on("c1iock",。 funoction() { 
$ ( "#photo" ) .an1mate({ 
width" : "90%", 
Wheight" : "90%" 


), 2000, "1inear" ) .an1mate ({ 
"width" | "20"。 
"height" : 020 名 ! 

), 2000, "1inear") , 

) ) : 


}) : 
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拡大 拡大 終了 縮小 


スラ イド ショ ー の 作成 





それ で は 、animate メ ソ ッ ド を 応用 し て 、 画 像 が 左右 に 流れ て いく スラ イド 
ショ ー を 自作 し て み ま し ょ う 。 


リス ト 14.7 スラ イド ショ ー 
HTML index.html 


< !DOCTYPE htm1l > 
<html] lanqd="]a リ "> 
<head> 
<meta Char8et="ufE-8 リ "> 
< 上 1]1e>JavaSCr1p 上 の 練習 </ 上 1t 上 1e> 
<8C エ ip gro="hEEp: //a]ax .doodleap1s .Com/a]jax/11Dbs/ 則 
] quUerY/ 1 . 9 . 1/]query .m1n .]8 "></ 8Cr1D セ 上 > 
く <8C エ 1p 人 上 gro= "8]11deShOw . ] 8 "></ 8C エ 1p 上 > 
<]1ink re]="gt 上 ylesheet" tyDe= "tex 上 /css" hrefF="Sty1e.C88"> 
</head> 


<DOdY> 
<d1V 1d= "photoOFrame "> 
<d1V 1d= "1madeArea "></d1 ざ > 
</ 1> 
<d1 ざ > 


<but 上 ton 1d= "DreV" > 前 へ </Dutt 上 On> 
<Dbutton 1d= "mext "> 次 へ </Dutton> 
</d1 ざ > 

</ body> 

</htm1 > 
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CSS style.css 


mardin: 0』 
paddinq: 0: 

) 

body { 
paddind: 30DxX: 


#photoFrame { 
PO81t1on : reGla ヒ 1V@G: 
width: 200Dxz 
heiqht: 150Dx: 
oVerE1ow: hidden: 

) 

#1maqeArea { 
PO81t1ion: aD8olutGez 
Tef 上 : 0DX: 
width: 1000px: 
height: 150Dx: 
wh1t@G- 8DaC@G : mnOW エ aD ヶ 


( 


w1dth: 200Dxz 
he1iqght: 150Dx: 





JavaScript slideshoW.jS 


$ (Eunoction() { 
Var 1madeArea = $( リ " 后 1madeArea リ ") 』 
for(vyar 1=1: 1<=5: 1++) { 
1madeArea .append( 周 
"<1md SrC=「1mades8/EF1ower" + 1 + ".]pP9'>") 2: 


) 


$ ("#next") .on("c1ick", Eunotion() { 
1f (par8eTnt (1madeArea.Csg("1eft")) > -800) 
1mageArea.animate({ 凡 
"1eft" : "-=200px" ),。 "Fagt"。 "11near") 』 


) 
)) 


$ ( "Drev") .on ("Cc1ick", Eunction() { 
1f(pargeTnt(1mageArea.cgg8("1eft")) < 0) { 
1imageArea .an1imate({ 如 
り 1eFt" : "+=200px" ),。 "fast" 。 "11near") 
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同 実行 結果 
flower1.jpg flower2.jDg flower3.jDg 


前 へ 決 へ 





馬 JavaScript 3 7 宮本 
を ゅ @ tle://C:/w 





flIOWer5.jDg flower4.jDg 


22 スラ イド ショ ー の 解 説 - HTML と CSS 


まず は TavaScript の 夫 の 部 分 を 見 て くだ さい 。#imageArea 要素 の 子 婦 素 
に <img> 要素 を 5 件 追加 し て いま す 。 そ の 結果 、#photoFrame 要素 以下 の 
HTML タグ は 次 の よう に 配置 る され ます 。 








アー 


150Dx 


' 
| 





1000px ーー Img 
ーー mageArea 


要素 の 配置 位置 ーー サテ DhOtOFr コ Pe 





各 要 素 に 設定 され た スタ イル を 詳し く 見 て み ま し ょ う 。 
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width: 200px: 
height: 150Dxz 


<img> 要素 に は 、 幅 200px 高き 150px が 設定 され て いま す 。 


#1mageArea { 
POo81Etion : aD8olut6e: 
1ef 革 上: 0ODX:z 
width: 1000px: 
height: 150Dxz 
white- 8DaC@: nOWTaD』 


#imageArea 要 素 に は 、 幅 1000px 高き 150px が 設定 され て いま す 。 幅 が 
1000px な の は 、 幅 200px の <img> 要素 を 子 要 素 と し て 5 つ 持 っ て いる た めで 
す 。 

position プロ パテ ィ は 、 有 要素 の 配置 方 法 を 設定 する プロ パテ ィ で す 。 親 要素 
の 値 に relative、 子 要素 の 値 に absolute を 指定 する と 、 要 素 を 配置 する 座標 を 
親 要素 か ら 見 た 相対 位置 で 指定 する こと が で きる よう に な り ま す 。left プロ パ 
ティ に 0Opx が 設定 され て いま す が 、 こ れ は 親 要 素 で ある #photoFrame 要素 の 
左端 の 座標 と まっ た く 同 じ 位 置 に 配置 きれ る こと を 示し ます 。 仮に left プロ パ 
ティ を 10px に 変更 する と 、#photoFrame 要素 の 左端 か ら 右 に 10px ずれ た 位置 
に 配置 され ます 。 

white-space プロ パテ ィ は 、 改 行 の 表示 方 法 を 設定 する プロ パテ ィ で す 。 値 
に nowrap を 指定 する と 、 要 素 内 で 折り 返さ な く な り ま す 。 子 要素 が 一 列 に 連 
な る の で 、 横 に 長い 形 に な り ま す 。 


#photoFrame { 
poO81tion: relat1Vez 
width: 200Dx: 
height: 150Dx』 
overF1ow: hi1dden: 
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#photoFrame 要素 に は 、1 件 分 の <img> 要素 と 同じ 幅 と 高き が 設 定 さ れ て い 
ます 。 

overflow プロ パテ ィ は 、 自 身 の 表 示 領 域 か ら は み 出 た 子 要 素 を どの よう に 表 
示す る か 設定 する プロ パテ ィ で す 。 値 に hidden を 指定 する と 、 は み 出 た 部 分 は 
表示 され な く な り ま す 。 よ っ て 、 次 図 に 示す と お り 、#photoFrame 要素 の 領域 
の 外側 は 表示 され ませ ん 。 実際 は 子孫 要素 と し て <img> 要素 が 5 件 存在 し て い 
ます が 、 画 面 上 に 見 えて いる の は 先頭 の 1 件 の み に な り ま す 。 


flower2.jDg flower3.jDg flower4.jDg flower5.jDg 


要素 の 表示 状態 





先頭 の 画像 の み 表示 





必 ボタ ンク リッ ク 時 の 動作 
ここ まで が 前 提 で す 。 そ れ で は いよ いよ 、[ 次 へ ] ボタ ン が クリ ッ ク さ れ た と 
き の 処 理 を 見 て み ま し ょ う 。 リ スト 14.7 の づ の の 部 分 で す 。 


$ ("next 上 ") .on("c1ick", Eunotion() { 
1f(pargeTn(1mageArea.C8g("1eft")) > -800) {( ーーーーーー⑬ 


1mageArea.animate({ 史 90 5 
9] 品 で 上 " : Na200pX" "fagE『。"11mnearYW) ) 
) 
}) 7 
2 行 目 の ⑩ の 処理 で す が 、 ま ず #imageArea 要素 の CSS プロ パテ ィ left に 設 


定 さ れ て いる 値 を 取得 し て いま す 。 初期 状態 で は left に は Opx が 設定 され て い 
ます 。 


14 1f (parseTnt ( 0 字 称 1 り わり 
| "0ODX" 


次 に 、 取 得 し た left プロ パテ ィ 値 を 数 値 型 に 変換 し て いま す 。 parseInt 関 数 
は 先頭 の 数 字 部 分 の み を 抜き 出す の で 、 数 値 型 の 「0| が 返り ます 。 
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こう し て 求め られ た 数 値 が @00 よ り も 大 きい 場合 は i 文 の ブロ ッ ク 内 を 実行 
し ます 。「-800] と いう 数 値 の 意味 に つい て は 後述 し ます 。 

続い て で は 、 ア ニメーション を 実行 し て いま す 。 プ ロ パ ティ 値 の 指定 の 仕 
方 が 少し 特殊 で す が 、 こ の よう に 複合 代入 演算 子 を 指定 する と 、 現 在 の プロ パ 
ティ 値 に 対し て 加減 算 を 行なう こと が で きま す 。 初回 実行 時 は 0px か ら 200px 
を 引い た 結果 、-200px が left プロ パテ ィ と し て 設定 され ます 。 


imageArea .animate({ "1eft" : "-=200pxW ),。 "fagt"。 "1inmear") 


#imageArea 要 素 の left プロ パテ ィ を Opx か ら -200px に 変化 きせ る と 、 有 要素 
の 配置 位置 が 次 図 の よう に 変化 し ます 。 





_ 】 約 mageArea を 左 へ 移動 
オー T この 画像 の み 表示 








[次 へ ] ポタ ン を 1 回 クリ ッ ク し た 後 の 要 素 の 配置 位置 


#photoFrame 要素 の 位置 は 変わ っ て いま せん が 、#imageArea 要素 の 位置 カ 
左 に 200px 分 ずれ た の で 、2 つ 目 の <img> 要素 が 画面 に 表示 され る よう に な り 
まし た 。left プ ロ パ ティ を 変更 する こと で 、 あ た か も 画像 が 右 か ら 左 へ 流れ て 
いっ た よう に 見 せ て いる の で す 。 

[次 へ ] を 繰り 返し て 行く と 、4 回 目 で 末尾 の <img> 要素 に た どり つき ます 。 
この 状態 で [次 へ ] が クリ ッ ク さ れ て も 、 次 の 要素 は 存在 し な い の で アニ メー 
ショ ン を 実行 する わけ に は いき ませ ん 。 そ こ で 、left プロ パテ ィ の 値 が -800 以 
下 に な っ た 場合 は 処理 を 実行 し な いよ うに 、ji 文 で 条件 を 指定 し て お いた の で 
す 。 
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-800Dx -600Dx -400Dx -200Dx 





末尾 の く img> 要素 を 表示 し て いる と き の 要 素 の 配置 位置 


[前 へ ] が クリ ッ ク さ れ た と き は left プロ パテ ィ に 数 値 を 加算 し て 、 逆 方 向 に 
#imageArea 要 素 を 移動 さき せま す 。 こ の よう な 仕組 み で 画像 が 左右 に 移動 する 
スラ イド ショ ー を 実現 し て いま す 。 


Kd スク リプ ト の バグ ーー キュ ー と は 

と ころ で 、 こ の スク リプ ト に は 実は バグ (不具 合 ) が あり ます 。 [次 へ ] ボタ 
ン (ある い は [前 へ ] ボタ ン ) を すばやく 何 度 も クリ ッ ク す る と 、 未 端 の 要素 
を 通り すぎ て し まう こと が あり ます 。 そ の 場合 、 空 の Web ペ ー ジ が 表示 され る 
は ず で す 。 





空 の Web ペー ジ 


な ぜ こ の よう な 現象 が 起こ る か と いう と 、 実 は アニ メー ショ ン は 即座 に 実 
行き れる わけ で は な い の で す 。 animate メ ソ ッ ド を 呼び 出す と 、 ア ニ メ ー シ ョ 
ン は 「 キ ュー」| と いう 、 処 理 を 溜め て お く ト ン ネ ル の よう な 場所 に 登録 され ま 
す 。 キ ュー に 登録 きれ た アニ メー ショ ン は 先頭 か ら 順 に 実行 きれ て いき ます 
が 、 キ ュー が 混み 合う と どん どん アニ メー ショ ン の 実行 が 遅れ て いき ます 。 そ 
の 状態 で ボタ ン の クリ ッ ク イ ベン ト が 実行 きれ る と 、#jimageArea 要素 の left プ 
ロ パ ティ は まだ 前 回 到達 する 予定 だ っ た 位置 に た どり つい て いな いこ と が あり 





ます 。 そ の た め 、 限 界 値 の -800px を 超え て し まう 現象 が 発生 する の で す 。 





今 -520px 
、 まで 来 た 











デュ 


-200Dx 
まで 進む 


キュ ー の イメ ー ジ 





left の 位置 
まだ -520px な の ? 
じゃ あ 次 の 人 

の 







left の 位置 が -800px に 達する まで 
アニ メー ショ ン を 登録 し 続け る 
イベ ント ハン ドラ 






そこ で 、 キ ュー に 順番 待ち の アニ メー ショ ン が 溜まら な いよ うに する た め に 、 


animate メ ソ ッ ド を 呼び 出し て か ら ア ニメーション が 完了 する まで の 間 は 、 ボ 


タン を クリ ッ ク で き な い よう に し て し まい まし ょ う 。 リ スト 147 の animate メ 
ソ ッ ド に コー ル バ ッ ク 関 数 を 追記 し て みて くだ さい (リス ト 148)。animate メ 
ソ ッ ド を 呼ぶ 直前 で 両 ボ タン に disabled 属 性 を 設定 し 、 ア ニメーション 完了 後 
に 実行 され る コー ル バ ッ ク 関 数 で disabled 属性 を 削除 し て いま す 。 


リス ト 14.8 コー ル バ ッ ク 関 数 の 利用 (slideshow.jS) 


$(Eunction() { 
Yar 1maqgeArea = $(" 提 1madeArea" ) 』 
Eor (Var 1=1: 1<=5: 1 ユ ++) { 
1maqeArea . append ( "<1imd Sro='1mades8/f1ower リ + 1 + リ ".]pd'>")』 
) 
$ ("#next") .on("c1ick",。 function() { 


yamgn な pgeMkra み 。 csg("]eft")) > -800) { 
toDisab1ed() ⑩ ボタ ン 無 効 化 


faS 上 ", "]1inear" 。 toEnab1ed) : 


⑨ ボ タン 有効 化 


$ ( "#prev" ) .on("c1ick", Eunotion() { 
tf (pargeTnt(1maqdeArea.Cgg("]left")) < 0) 
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toDisab1ed() 』 
1madeArea.an1mate( 周 
("1eft" : "+=200px") す "East", "11near "EoEmnab1ed) : 


Eunction toDisabled() { 。 
$ ( "Drev, #next") .attr("disabled", "disab1ed") 』 


function toEnab1ed() { 
$ ( "DreV, #mext") .removeAttr("digab1ed" ) 


animate メソ ッ ド で 独自 の アニ メー ショ ン を 作る こと が で きる 。 
mp メソ ッ ド チェ ー ン を 利用 すれ ば アニ メー ショ ン の 連鎖 を 起こ す 
こと が で きる 。 


この 草 の 到 達 魔 チ ェ ッ ク 





⑳ 1 以下 は 、<img> 要 素 の 幅 を 400px、 高 さら 50px に 変更 する アニ メー 
ショ ン を 実行 する スク リプ ト で す 。 空 欄 を 埋め て 完成 させ て くだ さい 。 


$("img").animate( 人 | |: 


Q る イー ジン グ の "Iinear" と は どう いう 意味 で すか ? 
Q 以下 の <img> 要 素 に 対し て スク リブ ト を 実行 する と 、 最 終 的 に 幅 は 何 
DX に な り ま すか が ? 


<1md SrC="1made8/EF1ower1 .]p9d" w1dths"200px"> 


スク リプ ト 
$("img") .animate({ "width" : "+=100px" }) 





⑬⑳ 全 以下 は 、<div> 要 素 に アニ メー ショ ン を 設定 し て 高 さ を 徐々 に 伸ばし た 
後 、 フ ォ ン ト サ イ ズ も 人 徐々 に 大 きく する スク リプ ト で す 。 空欄 を 埋め て 完 
成 さ せ て くだ さい 。 
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$("div") .animate({ "height" : "300px" ), 1000) | 。 有史 
({ "font-gtze" : "50px" }。 1000), 


Q⑳5 以下 の <img> 要 素 に 対し て スク リプ ト を 実行 する と 、 ど の よう な アニ 
メー ショ ン が 表示 され ます か ? 


<1md 8rC="1magdes/F1ower1 . Pd" w1dth="200px"> 


スク リプ ト 


$(Eunction() { 
$ ("1mg") .hide () .animate({"width" : "400px"),1000, "swing") : 


}) 


⑳@6 以下 の <img> 要 素 に 対し て スク リプ ト を 実行 する と 、 ど の よう な アニ 
メー ショ ン が 表示 され ます か ? 


<1md SrC="1made8/fF1ower1 .]p9d" w1dth="200px"> 


スク リプ ト 
$ (Eunction() { 


$ ("img") .animate( 凡 
{ "width" : "400px"),1000,"11near",t 上 OoPas81ve) 


}) : 


function EoPasgsive ( ) { 
$ ("1img" ) .hide() : 


ご 解答 は 巻末 に 掲載 
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ステ ッ プ へ 


あな た の 手 を 引き 、 支 える こと が で きる の は ここ まで で す 。 し か し 心配 し な 
く て も 大 丈夫 で す 。 気 づい て いな いか も し れ ま せん が 、 あ な た は も う 初 心 者 を 
脱却 し て いる は ず で す 。 こ こ か ら 先 は あな た 一 人 で も 歩い て 行く こと が で きる 
で し まず 。 

JavaScript や jQuery に は 、 本 書 で 紹介 し きれ な か っ た 機能 が まだ まだ た く 
さん あり ます 。 幸い 、Web 上 に は リフ ァ レ ンス が 山 の よ うに あり ます か ら 、 
ちょ っ と 検索 すれ ば 情報 は いく ら で も 出 て きま す 。 今 の 時 代 は 必要 な 情報 を 容 
易 に 入手 する こと が で きる の で すか ら 、 そ の 恩恵 を た っ ぷり と 受け て 、 貧 欲 に 
新しい 知識 を 取り 入れ て いき まし ょ う 。 

「 も っ と TavaScript を 極め た い ! 」 そん な あな た は 、 


・ ま すず は な ん で も 良い の で 、 ス クリ プ ト を 1 つ 作 っ て みる 


こと で す 。 特に な に も 思い つか な い 場 合 は 、 既 存 の Web サ イト や Web サ ー 
ビス の 模 信 で か まい ませ ん 。 と に か く ス クリ プ ト を 完成 きせ る こと が 重要 な の 
で す 。 や っ て みれ ば わか る と 思い ます が 、 ま ず 間 違い な くう まく いき ませ ん 。 
し か し 落ち 込む 必要 は まっ た く あ り ま せん 。 ス クリ プ ト が うま く 動 か な いと き 
こそ 、 ス キル アッ プ す る チャ ンス な の で す 。 問題 解決 の た め に 試行 錯誤 を 繰り 
返す うち に 、 自 然 と スク リプ ト の 書き 方 が 身 に つい て いく も の で す 。 そ う や っ 
て 続け て いれ ば 、 い ずれ 、 見 違え る よう に 成長 し た 自分 に 気づく こと で し ょ う 。 





JavaScript の サン プル 集 


本 書 の 公式 Web ペ ー ジ で は 、Web サ イト の 制作 で よく 使わ れ て いる 小 技 的 
な TavaScript の サン プル 集 を PDF で 公開 し て いま す 。 


http://www.ShoeiSha.CO.jD/DOOK/SuraSura/ 


この サン プル 集 で は 、 以 下 の よ うな TavaScript を 取り 上 げ て いま す 。 これら 
の スク リプ ト の 書き 方 を 一 通り 理解 で きれ ば 、T]avaScript の 初心 者 を 卒業 し た 
言え を る で し ょ う 。 本 書 の 学習 の 総 仕上 げ と し て 、 こ れ ら の スク リプ ト の 作成 
に 取り 組ん で みて くだ さい 。 


@ 実用 的 な 入力 チェ ッ ク を 行なう 

@ パス ワー ド の 入力 チェ ッ ク を 即時 実行 する 

@ サ ムネ イル 画像 の サイ ズ を 切り 替え る 

@ JavaScript が 有効 か どう か を チェ ッ ク す る 

@ テ ー ブ ル の 特定 行 を 強調 する 

@ 入力 中 の テキ スト ボッ クス の 背景 色 を 変え る 

@ ロー ディ ング 画面 を 表示 する 

@ 長 い 文 章 を 省略 し 、 | 続き を 読む リン ク を 表示 する 
@ 金額 を カン マ 区 切り で 表示 する 

@ 開閉 式 の メニ ュー を 作る 

@ 自動 的 に 隠れ る ナビ ゲー ショ ン メ ニュ ー を 作る 
@ ペ ー ジ トッ プ へ 戻る ボタ ン を 表示 する 

@ ス クロ ー ル で 画像 が めく れる 動き を 表現 する 

@ ドア が 開く よう な アニ メー ショ ン を 表現 する 

@ アバ ター 機能 を 作る 

@ タ ブ メ ニュ ー を 作る 

@ サ ムネ イル 画像 付き の スラ イド ショ ー を 作る 

@ ル ー プ する スラ イド ショ ー を 作る 

@ 一 定時 間 お き に 自動 で 動く スラ イド ショ ー を 作る 
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ん Nppencdix 





プロ グラ ム が うっ うまく 動 が な いと ぎ 
の 対処 法 一 テバ ッ ク 
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]avaScript で 記述 し た スク リプ ト (プロ グラ ム ) が うま く 動 か な いと き は 、 
プロ グラ ム の 中 に バグ が 潜ん で いな いか どう か を 疑っ て くだ さい 。 バ グ と は 、 
プロ グラ ム に 含ま れる 誤り や 不具 合 の こと で す 。 そ し て 、 プ ログ ラム か ら バ グ 
を 取り 除く 作業 の こと を デバ ッ グ と 呼び ます 。 

各種 プラ ウザ に は 、 デ バッ グ を 行なう た め の ツ ー ル が 用 意 き れ て いま す 。 本 
書 で は 、Google Chrome の avaScript コン ソー ル を 使っ た 利用 方 法 を 紹介 し ま 
す 。 





バグ の 要因 


バグ の 原因 に は 、 大 きく 分 け て 2 つの 種類 が あり ます 。 





@ プロ グラ ム の 記述 ミス (構文 エラ ー) 
@ 意 図 し た と お り に 動か な い 


以降 で 、 こ れ ら に つい て 見 て いき まし ょ う 。 







スク リプ ト の 記述 ミス 


 ( 橋 文 エラ ー) の 場合 





まず は 、1 つ 目 の 記述 ミス に よる 構文 エラ ー (SyntaxError) で す 。 こ れ は 構 
文 エ ラー、 つ まり 文法 の 書き 間違い で す 。 

さっ そく リス ト 1 の スク リプ ト に 目 を 通し て くだ さい 。 行 数 が わか りや すい 
よう に 、 ス クリ プ ト の 左側 に 行 番号 を 振っ て あり ます 。 こ の スク リプ ト で は 、 
7 行 目 で 文字 列 を 囲む な ダブル クォート () を 閉じ 忘れ て いる た め に エラ ー が 発 
生 し て いま す 。 


リス ト 1 記述 ミス が ある スク リプ ト 


< !DOCTYPE html] > 
<html] land="]a リ "> 
<head> 
<meta Char8et="utfF-8"> 


< 上 1 上 1]e>Java8Cr1p 上 の 練習 </t 上 1t1e> 
<8C エ 1p セ > ここ に "の 記述 が 漏れ て いる 


a1ert ("こん に ち は ) 
く / 8C エ 1p 上 > 
</head> 
<DOQY> 
</ body> 
: </htm1 > 


oO ココ の ぴよ いら の いも ご 
まし を まり まし を まし を まし 


この よう な 場合 、 原 因 の 特定 は 比較 的 簡単 で す 。 エ ラー が 発生 し て いる と き 
に は 、TavaScript コ ン ソ ー ル に エラ ー の 内 容 と 発生 箇所 が 表示 きれ ます 。 
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て 3 @| ロ fe:7/C:wortstLhtml uo oo {wtnt〔{ 上 


ゆ Uncaught SyntaxError: UnexDected token 1LLEGAL 
> 


回, >= Q Q <ltopframesy 紀 | Erors Warninss Los 


JavaScript コン ソー ル に は エラ ー 発 生 行 が 表示 され る 
AM リス ト 1 の HTML ファ イル を 作成 し 、 ブラ ウザ で 表示 する と 空白 ペー ジ が _ 
表示 され ます 。 空白 ペー ジ が 表示 され た 状態 で 、 キー ボー ド の [F1] キー 
を 押す と JavaScript コ ン ソ ー ル が 表示 され ます (も う 一 厩 FIg キー を 押す 
と JavaScript コ ン ソー ル が 閉じ ます )。 0 MM 








この よう に 、「SyntaxError」 と 表示 され た 場合 は 、 該 当行 に スク リプ ト の 記 
述 ミ ス が な いか 確認 し まし ょ う 。 
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て 、 厄 介 な の は 、 バ グ の 要因 の 2 つ 目 で す 。 こ れ は 、「 文 法 は 間違っ て いな 
い の で エラ ー は 発生 し な い が 、 ス クリ プ ト が 意図 し た と お り に 動か な い 」 と い 
う 場 合 で す 。 こ の よう な と き は 、 ス クリ プ ト の 目視 確認 を 行なっ て 問題 箇所 を 


特定 する し か あり ませ ん が 、 そ う 簡 単に は 見 つか ら な いこ と で し ょ う 。 そこで 


役立つ の が 、JavaScript コ ン ソ ー ル の 「 ブ レー ク ポ イン ト 」 と 「 ス テッ プ 実 行 」 
機能 で す 。 

リス ト 2 は 、 オ プシ ョ ン ボ タン で 選択 され た 時 間 常 に 合わ せ た メ ッ セ ー ジ を 
表示 する スク リプ ト で す 。 こ の スク リプ ト に は バグ が 含ま れ て いま す 。 


リス ト ら 意図 し た と お り に 動か な い ス クリ プ ト 


<!DOCTYPE html > 

<htm] lanqd="]a"> 

<head> 

<meta Char8e ヒ = "utfF-8『"> 

< 上 1 上 ]e>JavaSCr1pt の 練習 < / モ 上 1 上 1e> 

く 8C エ 1p gro= "hp : / /a]ax .doodleapis.com/a]jax/1ibs/ 凡 
] quUerY/ 1 . 9 .1/]query .m1n . 8 "></ 8C エ 1p セ 上 > 
7 : く <8C エ 1 上 > 


の い の らら いら の いも ビ 
1 まし まし We N を 


8 : $ (function() { 
9 : $ ("btn") .on("C1ick",。 ShowMessade) 
10 : }) : 
11 : function showMessage() { 
12 : Var time = $( "input [name= 't 上 ime '] :checked" ) .va1 ( ) 
1.3 : 1f(time == " 朝 ") { 
14 : alert ("お は よう 『) 2: 
1.5 : ) e1ge 1fE(time = " 昼 ") { 
16: alert 上 ("こんにちは") 』 
ませ 1 ) e1se ifE(time == " 夜 ") { 
18 : alert(" こ ん ば ん は ") : 
19 : ) e1gse { 
20: alert ("いずれ か の 時 間 帯 を 選択 し て 下さ い ") : 
21: 
22 : ) 


2 3 : く / 8C エ 1p ヒ > 
24: </head> 
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25。 <DOQY> 


26: <p> 現 在 の 時 間 帯 を 選択 し て 下さ い </p> 

27 <1nput type="radio" name="time" Value=" 朝 "> 朝 
28: <1nput type="radio" name="t1me" Value=" 昼 "> 昼 
29: <input type="rad1io" name= リ "time" Value=" 夜 "> 夜 
30: <1nput type="button" 1d="btn" va1ue=" 表 示 "> 
31: </Dbody> 

32: </htm1l > 





厨 実行 結果 






ho。 ご fle:///C: ん /work/list2. html IN ”ー 議 


0hW 語 9 6100JWNNLNMT KAI 和 が M 4ESM か 和 人 










現在 の 時 間 帯 を 叫 択 し て 下さ い 
@ 電 〇 号 〇 夜 表 条 | 議 







| JavaScript の 機 甘 
の 0 4 fl file: 77//C: /worklist2 htm_ 人 MR ーー 三 










更 在 の 時 間 基 を 選択 し て 下さ い 
O 朝 @ 号 〇 夜 表示 | 議 






ーー スー ニーーー ーーーーー ニ ーーーーーーーーーーーーーー ニ ーー プル ココ ーー ニー リー ニー ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 






現在 の 時 間 革 択 て 下さ 1 





この スク リプ ト を 実行 する と 、「[ 朝 |] と 「 昼 | を 選択 し た 場合 は 正しく 動く に 
も か か わら ず 、「 夜 ] を 選択 し た 場合 に は 「 こ ん に ち は 」 と いう メッ セー ジ が 表 
示さ れ て し まい ます 。 原因 を TavaScript コン ソー ル で 特定 し て み ま し ょ う 。 


付 
康 
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022) ブレ ー ク ポイ ント の 設定 


ブレ ー ク ポイ ント は 、 指 定 し た プロ グラ ム 行 で スク リプ ト の 実行 を 一 時 停止 
する 機能 で す 。 今 回 は 「 こ ん に ち は 」 と いう メッ セー ジ が 表示 され て し まう こ 
と か ら 、showMessage 関数 が 問題 と 思わ れる 箇所 で す 。 そ こ で 、 こ の 関数 の 
最初 の 行 に ブレー ク ポ イン ト を 設定 し ます 。 

プレ ー ク ポイ ント を 設定 する 手順 を 見 て いき まし ょ う 。 








| JavaScript コ ン ソ ー ル で 「Sources] タブ を 選択 し 、 左 上 の アイ コン 目 を 
リック グ し ます 。 


現在 の 時 間 帯 を 選択 し て 下さ い 
O 朝 〇 呈 @ 夜 了 条 | 





の 表示 され た 一 覧 か ら ス クリ プ ト が 記述 され て いる ファ イル (ここ で は Ilist2. 


html) を 選択 し ます 。 


を 3 @ Bte:/77C/votehm po 0 


HTC パーーーーーー バ ーー ツバ ーー ババ ーーーー ーー バーー ト ーー 


現在 の 時 間 帯 を 選択 し て 下さ い 
O 朝 O 昼 @ 夜 





ファ イル を 選択 











2 @ NW y き が WW w Aa 「 衣 ほ 。 _ 
お AA MA IE ま 表 」 AA MA *wJWW* WW 
< _- WW F KW - ロ 
wwAJUWW き ボ 生 


《G ファ イル の 内 容 が 表示 され た ら 、 ブ レー ク ポ イン ト を 設定 する 行 の 行 番号 
(CC と で は 12) もみ リッ クタ し まそ 。 


| * JavaScript の 練習 
う で IB fle: ///C: /work/list2. htm ニニ Lcaaaenaaaasーrrosoeu acc 





現在 の 時 間 帯 を 選択 し て 下さ い 
〇 朝 〇 号 ⑱ 夜 | 表示 | 


因 い De の 鏡 開 際 
田 list2 html 。。 | 


1 に ド 1! 
2 <html ds 


3| <head> 
| < 大 eta charset="ut-8"> 
| <tit1e>avaScript の 練 軒 </t1t1e> PSCPIP 和 や 
く SC て Tpt sr て =" 1 5 。 1 1 | 。9。 Trmryr 
く sCr1pt> BA 
$(function() { 訓 Ver t1me = 3("1nput[names "人 1 
$( "#btn*“) .on(“"c1ick*“ 。 show#essage ) > 所 ま ! E DO 
}) 
function showMessage() { 
Var て}1me = $ る ("input [name= "人 te ' ] :ChecKed" ) . yg1( ) 
if(time == " 和 衣 ") { 
alert(" お は よう "): 
}) else if(time = " 屋 ") { 
alert(" こ ん | に お | は"): 
}) else 1f( 人 上 me == "人 プ ") て 
alert(" こ ん ば ん は "): 
! oe ! ー 





ブレ ー ク ポイ ント を 設定 し た い 行 数 を 選択 


これ で 12 行 目 に プレ ー ク ポイ ント が 設定 され まし た 。 


JavaScript コン ソー ル の ウィ ンド ウ は 、 通 常 の ウィ ンド ウ と 同じ く 、 ウ ィ 
ンー ンド ウ の 左下 や 上 部 を ドラ ッ グ する こと で 大 きく し た ら 小 さく し た り で き 
ます 。 適宜 、 見 や すい 大 き さ に 変更 し て 利用 し て くだ さい 。 






ウィ ンド ウ を ドラ ッ グ し て 拡大 


%) スク リプ ト の ステ ッ プ 実行 


それ で は 、 オ プシ ョ ン ボ タン で | 夜 ] を 選択 し て [表示 ] ボタ ン を クリ ッ ク し 、 
も う 一 度 ス クリ プ ト を 実行 し て み ま し ょ う 。 
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する と 、 次 の よう に 、 ブ プ ブレーク ポ イン ト の 設定 行 で スク リプ ト が 停止 し ま 
す 。 現在 の 停止 位置 は 青く 表示 され ます 。 


1 XY TYPD チ kt 
メ < く htm1 1ang= "]a"> 
3| <head> 


<meta Charset=“"utf-8"> kk 疾 
<tit1e>JavaScript の 績 習 </t1t1e> b event dispatoh iquery mn ls.3 
<sCript src="httDp ://a]axX . 1 
<sCript> 

$(function( ) て paa oy g eraSor6or Avwakoodnr 


$("#btn" ) .on("c1ick"。 showiessage ) : PR ーー ヾ へ 
})} YScepeVarables 
ES 


[ function showMessage 間 | Y Loca1 
2 pthis: 1nput#btn 
| 1 ず ( 信 1me = ェ = * time: undefined 


alert( - お は よう p の し 
) e1se if(time = " 屋 ") て ぁ 61oba1 


ャ handle iqueryJTin js-3 


a1ert(" こ ご こんにちは"): 
) else 1 ぞ f( 人 1me == ") { 才 
alert(" こ ん ば ん は") 。 var time = _5C npvttname・- 


Aa CO ua "| ま DOM Bre DDHIIS 
3 提 3 用 は 内 沿 計 2 科 ま 総 : 0 R 3 SN 2 ED 人 SS 2 CNS242 け おら 1 科 39 記 MK ば) は 2 
230 年 DESEUEPYSOEORRENIOEEODSOUOMUTONSYOWOEMIOCMISNS し LIL MI 


ブレーク ポイ ント 設定 人 で 処理 が 上 上 よる 





この と き 、 右 側 の 「Scope Variables] に は 変数 の 中 身 が 表示 され ます 。12 行 
は まだ 実行 され て いな い の で 、 変 数 time の 値 は 何 も 代 人 され て いな いこ と を 表 
わす |「undefined」 値 に な っ て いま す 。 

次 に ステ ッ プ 実行 を 行ない まし ょ う 。 ス テッ プ 実 行い は 、 ス クリ プ ト を 1 行 ず 
つ 実 行 し て いく 機能 で す 。 コ ン ソ ー ル の 右側 に ある アイ コン 人 編 を クリ ッ ク し 
て 実行 で きま す 。 1 回 クリ ッ ク し て くだ さい 。 





デバッグ 関連 の アイ コン 
ステ ッ プ 実行 を 行なう と 、 現 在 の 行 を 実行 し 、 次 の 行 へ 進み ます 。 
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人 <IDOK TYPE htL> 
2 <ht 和 mm1 1ang="]a"> 
3| <head> 
<weta charset="utf-8"> 


<tit1e>JavaScript の 練習 </tit1e> 
く <sCFiDt sr て =" 
<s て ript> 

$(function( ) て 

$("#btn" ) .on("c11ck" 。 showMessage ) : 
}) 
function showMessage() 
"in 


}) el1se if(time = -”) { 
ag1ert(“ こ ん | に お | は * ): 

) el1se 1f(time == "人 簡 ") { 
alert(" こ ん ば ん | は *): 

}) else て 


< GEARAtGSuedetketees0edkseotoktetietesduxkdteuisut 
> QA @ の 
ステ ッ プ 実行 1 回 目 





今回 は 12 行 目 が 実行 され 、3 つ ある オプ ショ ン ボ タン の うち 、 選 択 中 の 要 
素 の value 値 を 取得 し 、 変 数 time へ 代入 する 処理 が 行なわ れ ま し た 。「Scope 
Variables」 欄 の time の 値 が | 夜 ] に 変化 し て いる こと を 確認 し て くだ さい 。 

ここ まで は 特に 問題 が 見 つか ら な い の で 、 も う 一 度 ス テッ プ 実 行 し て 次 の 行 
へ 進み まし ょ う 


3 | < IDOCTYPE ht 遇 > 
2 |<htm1 1ang=“"]a"> 
3| <head> 
く 章 で ta Charset= "ut て tf-8"> 
く <script src="h 3L 
く <sCript> 
$(function( ) て { 
$("#btn").on("c1ick" 。 showMessage ) : 
}): 
function showMessage() て 
Var tme = る ("1nput[name= time' ] :checked" ) . va1 ( ) : 
1f( 人 me == " 萌 ") て 


alert(" : も Breal KD pmts 3 SN 
lo12Nt12 

5 ft … - 0 EI 
var time = $("1 


) el1se 1f(t1me == “" 全 ") て 
alert(" こ ん ば ん は" ) 
) e1se て > 


人 eeWO 和 RI で RTTRSPSYJWePYRP RI 


| 活 | | 全て ) 人 


ステ ッ プ 実行 2 回 目 


time の 値 は 「 朝 |] で は な い の で 、ii 文 の 最初 の 条件 式 を スル ー し て 次 の 条件 
式 へ 進み まし た 。 さ ら に ステ ッ プ 実行 し て み ま す 。 


* Wst2 html に ] IN 
1 いい oo Yi 上 4 っ の 0 みい ey い Ye 0 あ かこ AA いい こと な AWCAA タ 2 てい YY い あの 0 シッ ov ei 
3 XXCTYPf ht 
2 | <ht 生 1 1ang=*]a" > 
3| <head> 
< く あ で ta て harset="utf-8"> 


<tit1e>JavaScript の 書 突く /t は t1e> 
<script src=" 
<s て ript> 
$(function( ) て | すっ cohE VariahMES 
4 showMessage ) Y Loca1 





}): 
function showMessage() て ( 
Var t1me = $(^* し 
1f(time == “ 番 ") oc 
alert( - お は よう ・ ): oints 


el1se 1f( 人 て 上 ime = ーー SN 
) el1se 1f(t1me == “1( タ ") て _ Var -t3ae . 日 いい IO 


alert(“ こ ん ば ん | は * キ 
} el1se て 


キー の ザイ サ CTY 了 YR ペー 
ステ ッ プ 実行 3 回 目 


15 行 目 が 実行 され た 結果 、time の 値 が | 昼 」 に 変化 し て し まい まし た 。 ス テッ 
プ 実 行 し な が ら 変 数 の 値 を 確認 する こと に よっ て 、15 行 目 の else if 文 の 条件 式 
に バグ の 原因 が ある こと を 特定 で きま し た ね 。 

15 行 目 の 条 件 式 を よく 見 て みる と 、2 つ の 値 を 比較 する 演算 子 が 「==」 で は 
な く 代 入 を 表わす |「=] に な っ て し まっ て いま す 。 


15 : ) e1ge 1fE(time = " 昼 ") { 
これ に より 、 ま ず time に 「 恒 」 が 代入 きれ 、 次 に 正文 が time の 値 を 元 に 条件 
判定 を 行ない ます 。 


JavaScript で は 条件 式 に 論理 値 以外 の 値 が 指定 され た 場合 、 次 の よう に 判定 
され ます 。 


に 1 に (> まい は < ョ ル ) | tru@6 と し て 判定 され る 値 
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time の 値 は 「 昼 」 な の で 、true と し て 扱わ れ て し まい 、15 行 目 の else ブロ ッ 
ク が 実行 きれ て いた の で す 。 比 較 演 算 子 を |「==」 に 修正 する こと で デバ ッ グ が 
完了 し 、 ス クリ プ ト が 正しく 動作 する よう に な り ま す (ソー スコ ー ド の 修正 は 
]avaScript コ ン ソ ー ル 上 か ら 行 な うこ と は で きま せん )。 


15 : ) e1se 1E(Eime == 『 昼 ") { 


VS 
 - 陳 @ 自 fle: 777C: /work/list2. html 


現在 の 時 間 帯 を 選択 し て 下さ い 


if(time == " 翻 ") ( 
alert(“ お | は よう 
} else 1 了 (t1me == 
alert(“ こ ん | に こち | 
}) e1se 1f( 人 上 me == 
alert(* こ ん ば ん | 
) else バ 


A いずれ か の 時 間 辻 を 層 択 し て 下さ い "): 


} 

| </script> 

| </head> 

| <body> 
<p> 現 在 の 時 間 敬 を 憶 択 し て 下さ い </p> 
<input type=“"radio" name="time" value=" 朝 *> 朝 
<jnput type="radio" name= “て ime" value=“ 昼 "> 昼 
<input type="radio" names"t1me" values" 俊 "> 條 
<input type="button" id="btn" vaglue=“" 表 示 “> 





15 行 目 を 変更 後 の 実行 結果 


この よう に 、 原 因 不 明 の バグ が 発生 し た 場合 は 、 た だ や みく も に ソー スコ ー 
ド を 目視 確認 し て いく より も 、 デ バッ グ ツ ー ル を 効率 的 に 活用 する こと が 原因 
特定 へ の 近道 で す 。 ぜ ひ ツ ー ル を 活用 し て くだ さい 。 
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A.3 意図 し た と お り に 動か な い 場 合 


ステ ッ プ 実行 以外 の 癌 種 ア イコ ン の 機能 
ステ ッ プ 実行 以外 の 機能 こつ いて も 紹介 し て お きま す 。 実際 に 試し て みる と 良 





欠き の 9 


lp や を す の 
2 の @ の 
% 実行 
ー 時 停止 中 の スク リプ ト を 再開 し ます 。 ス テッ プ 実 行 を 信 中 で 終了 し 、 ス クリ 
プ ト を 最後 まで 実行 する 場合 は この アイ コン を クリ ッ ク し ます 。 





ら の ステッ プイ ン 
ステ ッ プ 実行 と 同様 に 次 の 処理 を 実行 する 機能 で す が 、 関 数 を 呼び 出し て いる 
場合 は 呼び 出し 先 の 関数 の 中 も 1 行 ず つ 実 行 し ます 。 


9 ステ ッ プ アウ ト 
ステ ッ プ 実行 と 同様 に 次 の 処理 を 実行 する 機能 で す が 、 現 在 実行 中 の 関数 を 最 
後 ま で 一 気 に 実 行 し 、 呼 び 出 し 元 へ 戻り ます 。 


の ブレ ー ク ポイ ント の 無効 化 

すべ て の ブレ ー ク ポイ ント を 一 時 的 に 無効 化し ます 。 も う 一 度 ク リッ ク す る と 
ブレ ー ク ポイ ント が 有効 に な り ま す (ブレ ー ク ポイ ント を 完全 に 除去 し た い 場 
合 は 、 ブ レー ク ポ イン ト を 設定 し た 行 番号 を も う 一 度 ク リッ ク し ます )。 
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画 チェ ッ ク テ スト の 解答 例 


(全戸 0 


Check ヤ Test1 

Q⑳ 1 

A) HTML (Hyper Text MarkuD Languag@) 
B) CSS (Cascading Style SheetS) 

C) JavaScript 


Q る 

A) パソ コン 

B) 病 令 

C) 簡易 的 

D) 簡易 プロ グラ ミン グ 言 語 

Q9 

静 的 な Web ペ ー ジ と は 、 主 に HTML (と CSS) で 作ら れ た 「 動 き の な い 」 Web ペ ー ジ 
の こと で す 。 科 単に いう と 、 同 じ URL に アク セス する と 、 毎 回 、 同 じ 内 容 、 デ ザイ ン で 
表示 され る ペー ジ で す 。 

対し て 、 動 的 な Web ペ ー ジ と は 、 主 に HTML/CSS/JavaScript で 作ら れ た 「 動 き の あ 
る 」 Web ペ ー ジ の こと で す 。 こ ちら は 、 同 じ URL で も 、 異 な る 内 容 、 デ ザイ ン で 表示 さ 
れる ペー ジ で す 。 


CheckWTPest る 

Q 1 

A) リク エス ト (要求 ) 

は) プラ ウザ 

C) レス ポン ス (応答 ) 

D) Web サー バー 

る 

サー バー サイ ドス クリ プ ト と は 、 デ ー タ ベー ス と の 連携 を 主 目 的 と し た 、 サ ー バ ー 上 で 動 
作 す る スク リプ ト の こと 。 主 に PHP や Huby な どの プロ グラ ミン グ 言 語 で 記述 され ます 。 
クラ イア ント サイ ドス クリ プ ト と は 、Web ペ ー ジ の 操作 を 主 目 的 と し た 、 ク ライ アン ト 
(ブラ ウザ ) 上 で 動作 する スク リプ ト の こと 。 主 に JavaScript で 記述 され ます 。 


m 、 ご の 韻 の 到達 摩 チ ェ ッ ク 

Q 1 

主 に ブラ ウザ 上 で 動作 する スク リプ ト 言 語 (ブラ ウザ に 作業 を 命令 する た め の プ ログ ラミ 
ング 言語 )。 

Q る 

フラ ウザ 上 









菩 開 ブラ ウザ 上 で 動作 し 、 主 に Web ペー ジ の 表示 を 制御 し ます 。 
Q3 

A) クラ イア ント 側 (また は ブラ ウザ 上 ) 

B) サー バー 

C) 速い 

D) ブラ ウザ 


Q4 

ブラ ウザ の 種類 に よっ て スク リプ ト の 動作 に 違い が あり ます 。 

圏 開 現時 点 で は この よう な 問題 が ある と いう こと だ け 知 識 と し て お ぼ え て お いて くだ さい 。 
Q5 

デキ スト ド エ デ ィ タ と ブラ ウザ 

圏 較 テ キス ト エ ディ タ で スク リプ ト を 記述 し 、 ブ ラウ ザ で 動作 確認 を し ます 。 


人 の ニハ べべ べべ べべ へ 


CheckWPest1 
Q1 


A) Web ペー ジ 
B) タグ 


CheckTPest る @ 

Q1 

A) ぐ 

B) > 

C) 要素 

Q る 

要素 の 中 に 別 の 要素 を 入れ 込ん で いく 構造 の こと 。 入 れ 子 と も 呼び ます 。 
Check"Pest3 

Q1 


ぐ く html> タグ 


Q る 

charset 属 性 
CheckWTPest4 
Q1 

< く ag> タグ 


る 
SrC 属性 
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 、 ご の 章 の 到達 度 チ ェ ッ ク 
Q1 
utf-8 


< く meta> タグ で 指定 し た 文字 コー ド と ファ イル を 保存 する と き に 指定 する 文字 コー ド を 合わ 
せま す 。 


る @ 


tyDpe= "radio" 
層 拭 type 属性 の 値 を 変え る こと で 、 さ ま ざ ま な 部品 を 生成 で きま す 。 
QS 
A) tr 
B) th 
C) td 
圏 接 行 (tr) の 中 に 列 (th、td) が 入っ て いま す 。 


Q94 
diary/B . htm1 


較 関 相対 バス 指定 で は 、 現 在 の ペー ジ か ら 見 た 目的 地 ま で の 経路 を 指定 し ます 。 デ ィ レ クト リ 間 は 
スラ ッシュ (/) で 区 切り ます 。 


Q5 
../ hobby/B . htm1 


1 つ 上 の ディ レク トリ へ た どる に は 「.…」 の よう に ドッ ト (.) を ら つ つなげ ます 。 こ の 問題 で 
は いっ た ん root デ ィ レ クト リ ま で 戻っ て か ら 、hobby デ ィ レ クト リ へ 進ん で いま す 。 ち な み 
に 、 ど つ 上 の ディ レク トリ に ある ファ イル を 参照 する に は "../../***.html『 の よう に 記述 し ます 。 


間 


CheckWPest1 

Q1 

正式 名 称 は Cascading Style Sheets で 、HTML 文書 を 装飾 する (飾り 付け る ) た め の 
言語 。 育 景 や 文字 の 色 設 定 、 文 字 や 画像 の サイ ズ や 表示 位置 の 調整 な ど 、Web ペ ー ジ に 
スタ イル を 適用 する た め に 使わ れ ま す 。 

Q る 

A) link 

B) "stylesheet' 

C) "text/csSg" 

D) href 





CheckTPest る 
Q 1 


A) セレ クタ 
B) プロ バ パティ 
る 


文字 サイ ズ を 指定 する プロ バテ ィ 。 


時 、 ご の 章 の 到 填 度 チ ェ ッ ク 





0 1 

<1ink re1="stylesheet" tyDe="Eext/Csg" href= リ "St 上 yY1e.CS8 リ > 
く |Iink> タグ は 空 要 素 で す 。 
Q る 

p { 


Color: D1Ue: 


賠 開 特定 の タグ すべ て に 対し て スタ イル を 適用 する 場合 は 基本 セレ クタ を 使い ます 。 
Q3 
#ex { 
Font-81ze: 15DX: 
) 


ID セレ クタ は ID 属性 値 の 前 に # を 付け ます 。 
- 全 

margdin: 0ODX: 

paddinqd: 0DX: 


隊 開 波 か っ こ {| 内 に は 複数 の プロ パテ ィ を 並べ て 指定 で きま す 。 


Q5 
-box { 
width: 200Dpx: 
height: 80DxX』 
) 


圏 華 ク ラス セレ クタ は クラ ス 名 の 前 に ドッ ト () を 付け ます 。 
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人 


CheckTYest1 

Q⑳⑩1 

ぐ script> タグ 

謎 拉 く SCriDt> タグ は く head> また は < く body> の どちら の 中 に 記述 し て も か まい ませ ん 。 


Q る 

a1ert(" こん に ち は 『) : “ 0 
昌 文字 列 は ダブ ルク ォ ー ト また は シン グル クォート で 囲み ます 。 
CheckTest る 

0 1 

4 6 4 AN 

席 抽 交 数 は 利用 する 前 に まず 宣言 を し ます 。 

Q る 
congso1e.1og(x) : 

店 抽 変数 名 を 指定 する と 、 変 数 の 中 身 が 出力 され ます 。 


CheckWTPest3 
Q1 
100100 


較 還 + 演算 子 で ら つ の 値 を 加算 し た 場合 、 ご どちら か 片方 で も 文字 列 で あれ ば 、 値 の 連結 が 行なわ れ 
ます 。 


Q る 2 
31 
還 義 y の 初期 値 10 に 3 を 掛け て 、 最 後に 1 加算 し て いま す 。 


CheckTest 人 4 
Q1 























衣 示 インデックス は 0 か ら 始 まり ます 。 





" 





一 配 列 名 length で 配列 の 要素 数 が 取得 で きま す 。 








告 、、 ご の 草 の 到 頑 諾 チェ ッ ク 
Q 1 
<8Crip gro="Samp1e.]8"></gCr1ip セ > 


散 皇 く script> タグ に は 終了 タグ が 必要 で す 。 





Q る 






散 製 先 に y の 値 を x に 代入 し て いる の で 、x の 値 は 20 に 上 書き され て いま す 。 
Q9 


還 数 値 の 10 に 文字 列 の "10" を 連結 し た 結果 、x の 値 は 文字 列 型 の "1010" に な り ま す 。 









[ 1][ ど ] 
衣 皇 一 次 元 配列 の 場合 、 次 の よう に イン デック ス を 指定 し ます 。 








Q5 
キー 
散 抽 連想 配列 は キー と 値 の セッ ト が 複数 集まっ た も の で す 。 





Q6 

Ta「Tm@ 

角 缶 連想 配列 の 要素 の 値 を 取得 する に は 、 角 か っ こ 日 が ドット 〔(.) を 使い ます 。 
Q7 
初期 値 を 角 か っ こ 晶 で 囲ん で いる の が 誤り 。 

衣 製 連想 配列 の 初期 値 は 波 か っ こ 人 で 囲ん で 指定 し ます 。 


NE 


CheckTest』 
Q1 












了 再 条件 式 の 内 容 は 「x に 代入 され て いる 文字 列 が "ABC" で は な い 」 で す 。x に 入っ て いる の は 
"ABC" な の で 、 結 果 は false と な り ま す 。 


Q る 
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衣 缶 条件 式 の 内 容 は 「y が 10 以 上 で か つ 、x が y よ り も 大 きい 」 で す 。y が 10 以 上 と いう 条件 は 
満た し て いま す が 、x は y よ り も 小さ いた め 結 果 は false と な り ま す 。 


Check"m 


Q 1 
胡 抽 Sswtich 文 で は 、break 文 が な い 限 り 、 値 が 一 致し た case キ ー ワ ー ド 以降 の 処理 を すべ て 実 
行 し ます 。 


Q る 
記入 どの 値 に も 一 致し な か っ た 場合 は default キ ー ワ ー ド 以降 の 処理 が 実行 され ます 。if 文 の else 
キー ワー ド と 同様 の 役割 で す 。 


CheckWPest3 

Q1 

3 回 

較 畔 a の 値 が 1 、 ら 、3 と 変化 し て いき ます 。 ョ a が 3 に な る と 、 次 の 繰り 返し 処理 へ 進ん だ タイ ミン 
グ で 「a が 9 未満 」 と いう 条件 を 満た さ な く な り 、 繰 り 返 し を 抜け ます 。 

Q る 

0 回 


了 姜 最初 か ら a の 値 が 3 な の で 、「a が 39 未満] と いう 条件 を 満た すこ と が な く 、 ブ ロッ ク 内 は 実行 
され ませ ん 。 


CheckTest4 
Q 1 























較 1 が 5 か ら 始 まり 、0 よ り も 大 きい 間 繰 り 返 し ます 。 繰り返す た びに の 値 が 1 減算 され ます 。 


Q る 2 
4 回 
胡 缶 for-in 文 は 連想 配列 の 要素 数 分 繰り 返し を 行ない ます 。 


この 草 の 到 達 度 チェ ッ ク 














了 振 イコ ー ル が 3 つつ な が る と 、 デ ー タ 型 ま で 含め て 一 致す る か どう か チェ ッ ク し ます 。 数 値 型 の 
10 と 文字 列 型 の 10 を 比較 し て いる の で 、else 以 降 の ブロ ッ ク が 実行 され ます 。 
Q る 


default 

関 吊 case で 指定 され た どの 値 に も 一 致し な か っ た 場合 に 実行 され ます 。 
Q3 
A) 0 

B) fruits.length 


衣 振 イン デック ス は 0 か ら 始 まる の で 、 カ ウン タ 変 数 の 初期 値 も 0 に し ます 。 ま た 、 イ ン デ ックス 
の 最大 値 は 配列 の 要素 数 -1 と な る の で 、 カ ウン タ 変 数 の 値 が 配列 の 要素 数 未満 の 間 繰 り 返 す 
よう に し ます 。 

















_ 全 

A) jn 

B) [X] 

関 皇 連想 配列 の 要素 を 1 つ ず つ 処 理 す る に は 、for-in 文 を 使い ます 。 変 数 x に は 連想 配列 が 持つ 





キー の うち いずれ か 1 つが 代入 され ます 。 


Q5 





悦 華 {が 5 より も 大 きく な る と 繰り 返し を 終了 し ます 。 ま た 、i が 3 で 割り 切れ る と き は 次 の 繰り 返 
し 処理 へ 進み ます 。 


Q6 
表 調 が 1 か ら 10 ま で の 間 繰 り 返す for 文 の 中 で 、i が ら で 割 り 切 れ た と き に 繰り 返し か ら 抜け る よ 
うに な っ て いま す 。 最初 に 1 が ら で 割 り 切れ る の は ら 回 目 な の で 、 そ れ 以 降 の 繰り 返し 処理 は 


実行 され ませ ん 。 


Q⑩7 








i が 1 か ら 10 ま で の 間 繰 り 返す for 文 の 中 で 、i が ら で 割 り 切 れ た と き に 次 の 繰り 返し 処理 へ 進 
むように な っ て いま す 。continue 文 が 実行 され る と 実行 中 の 処理 を 中 断 し て 次 の 繰り 返し 処 
理 へ 進 び の で 、 コ ン ソ ー ル へ の 出力 は 行なわ れ ま せん 。 








頂 ! に 
「( AM UM 
1 
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6 


CheokTest1 
Q1 


func ("ABC" ) 
較 開 () 内 に は 引数 と し て 渡す 値 を 記述 し ます 。 数 値 や 文字 列 、 変 数 や 配列 な ど で も か まい ませ ん 。 


Q る 


てら @G ヒ U エ ロメ) 


戻り 値 の 指定 に は return 文 を 使い ます 。 


CheckK"Pest る 

0 1 

エン コー ド 

圏 翔 エン コー ド さ れ た 文字 列 を 元 に 戻す て と は デコ ー ド と 呼び ます 。 

Q る 

NaN 

國 開 数値 で な いこ と を 表わす 特殊 な 値 で す 。iSNaN 関 数 で NaN 値 か どう か を 調べ る こと が で きま す 。 


Check'"Pest3 

Q1 

x) グロ ー バ ル 変 数 

y) ロー カル 変数 

較 開 関数 の 外側 で 宣言 し た 変数 は グロ ー バ ル 変 数 、 関 数 の 内 側 で 宣言 し た 変数 は ロー カル 変数 で す 。 
Q る 

x) ロー カル 変数 

y) グロ ー バ ル 変 数 

較 開 関数 の 引数 は ロー カル 変数 で す 。 ま た 、 宣 言 を 省略 し た 変数 は グロ ー バ ル 変 数 に な り ま す 。 


時 、 ご の 章 の 到達 度 チ ェ ッ ク 
Q⑳ 1 
CalcTriangle(30, 50) 
識 拓 引数 が 複数 ある 場合 は カン マ 区 切り で 指定 し ます 。 















隊 謀 文字 列 型 の "10.5" を 数 値 型 の 10.5 に 変換 し て いま す 。parseFloat 関 数 を 使う と 小数 点 以下 
の 値 も 得る こと が で きま す 。isNaN 関 数 は 指定 され た 値 が NaN の と き に true を 返す 関数 で す 
の で 、 こ の 問題 で は 戻り 値 が false と な り ま す 。! 演 算 子 に よっ て 諭 理 値 が 反転 し 、if 文 の 条件 
式 の 結果 は true となり ます 。 





解説 交 数 X は グロ ー バ ル 変 数 で す 。 blue 関数 内 で x に 2 っ 0 を 加算 し て いる の で 、 値 が 30 に 上 書き 
され ます 。 


= 提 








較 還 DIus 関数 の 引数 X は ロー カル 変数 で 、 グ ロー バル 変数 の x と は 名 前 が 同じ だ け の 別物 で す 。 





plus 関 数 内 で の 加算 処理 は ロー カル 変数 x に 対し て 行なっ て いる も の で す 。 よ っ て グロ ー バ ル 
変数 x の 値 は 変化 し ませ ん 。 


Q5 


funC 
康 振 定義 し た 関数 を 変数 へ 代入 する に は 、 関 数 名 だ け を 指定 し ます 。 


Q6 
諾 4 ("ABC!) 人 02404. 人 

放 お 7 変数 f に 尋 名 関数 が 代入 さ れ て いま す 。 

Q7 

(こんにちは )) 

了 抽 定義 し た 関数 を すぐ に 呼び 出し て 実行 する 、 即 時 関数 の パタ ー ン で す 。 後ろ の 丸 か っ こ 内 に 指 
定 し た 値 が 引数 と し て 渡さ れ ま す 。 


お 


CheckTest1 

Q1 

胃 敵 メソッド を 実行 する に は 、 キ ー の 後ろ に 丸 か っ こ () を 付け ます 。 
Q2 
thiS 

較 皇 自身 ひ オ ブ ジ ェクト が 所 有 し て いる プロ パテ ィ や メソ ッ ド を 利用 する 場合 に 先頭 に 付け ます 。 

















衣 缶 [ ] で 初期 化す る と Array オ ブ ジ ェクト に な り ま す 。 


Q る 
Object 
抽 [| で 初期 化す る と Object オ ブ ジ ェクト に な り ま す 。 








Q1 

A) item ら 

B) item1 

職 呈 メソ ッ ド の 所 有 者 を 先 に 記述 し ます 。 


Q る 
UP 


蔽 call メソ ッ ド に よっ て 別 の オブ ジェ クト の メソ ッ ド を 実行 し た 場合 、this キー ワー ド が 表わす 
も の は call メ ソ ッ ド の 引数 と し て 渡さ れ た オブ ジェ クト で す 。 


Q3 

SDIit 

衣 缶 変数 Str に は 、 連 結 さ れ た 文字 列 "A/B/C" が 代入 され て いま す 。 split メ ソ ッ ド で "/" を 区 切り 
文字 と し て 分 解す れ ば 、 元 の 配列 と 同じ 状態 に 戻り ます 。 








Q4 








衣 抽 mon" と いう 文字 列 と 一 致す る 箇所 は 4 か 所 ある の で 、match メ ソ ッ ド は 要素 4 つ 分 の 配列 


を 返し ます 。 









謝 4 正規 表現 の パタ ー ン に が 付い て いる の で 、 末 尾 の "day" の み が 置 換 対象 と な り ま す 。 
人 


A) イベ ント ハン ドラ 
B) イベ ント 駆動 型 モ デル 


CheockWTPest る 
Q1 
ぐ Dbody> 要素 


Q る 
blur イ ベン ト 
生  、 ご の 草 の 到 達 麻 チェ ッ ク 
Q 1 
Onload 
onload は 、HTML タグ の 読み 込み が すべ て 終わ っ た 後 で 実行 され ます 。 


Q る 


OnDlur 
衣 製 OnDIlur は 、 対 象 の 部 品 の 選択 状態 が 解除 され た タイ ミン グ で 実行 され ます 。 





Q③ 


Onchang@ 
隊 開 onchange は 、 セ レク ト ボ ックス 等 の 選択 項目 が 変更 され た タイ ミン グ で 実行 され ます 。 


Q4 

thiS 

謗 執 OnClick な どの イベ ント ハン ドラ の 属性 値 と し て 記述 し た 処理 の 中 で は 、this は HTML 要素 自 
身 を 表わし ます 。 


Q5 


Valu@e 
隔 要素 の 属性 値 を 得る 場合 は 、 要 素 が 代入 され て いる 変数 名 の 後ろ に ドッ ト を 挟ん で 属性 名 を つ 
な げ ま す 。 


和合 : が 昌和 


CheckWTPest1 
0 1 
A) 親 
B) ウィ ンド ウ 全 体 
ChecK'TPest る 
0⑳1 
window.c1ogse(): 
Q る 
setTimeout メ ソ ッ ド 
CheckKWPest3 
Q1 
alert 上 (1ocation .href) : 
Q る 


higtory.back ( ) : 








Q1 
前 の ペー ジ へ 戻り ます 。 
左 抽 』 COnfirm メ ソ ッ ド は 、OK が クリ ッ ク さ れ た 場合 に 戻り 値 と し て true を 返し ます 。 こ の 問題 で 





は ! 演 算 子 が 付い て いる の で 、 論 理 値 が 反転 し て false と な り ま す 。 よ っ て else ブロ ッ ク が 実 
行 さ れ ま す 。 
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る 
http://WWW.gOOgle.CO.jD/ に 移動 し ます 。 


Location オ ブ ジ ェクト の href プロ パテ ィ は 現在 の URL を 表わし ます 。 こ れ を 書き 換え る こ 
と で 、 別 の ペー ジ に 移動 する こと が で きま す 。 


Q9 
5 秒 お き 
園 義 タイ マー 処理 の 実行 間隔 は 、 ミ リ 秒 単位 で 記述 し ます 。 


Q4 


cearTnterYa1 ( 上 1d) 
clearlInterval メソッド は 、 引 数 に 停止 する タイ マー の ID を 指定 し ます 。 
Q5 


document .F エ て . 上 。 び alLue = "ABC": 


「document. フ ォ ー ム 名 . フ ォ ー ム 内 部 品名 」 の 順番 に 指定 する こと で 要素 を 取得 で きま す 。 
要素 が 持つ 属性 値 は スク リプ ト 上 で 変更 で きま す 。 


05 


Check"TPest1 

Q 1 

A) マー クア ッ プ 言語 

B) ツリ ー 

Q る 

3. 兄弟 要素 

CheckWPest る @ 

Q 1 

HTML 要素 の 集合 体 で 、 配 列 の よう に 0 か ら 始 まる イン デック ス が 振ら れ て いま す 。 


Q る 


a1ert (document .qetE1ementBy エ Td ( "messaqe " ) . 1nnerHTMTL) 


Q⑳1 

getElementByld 

id を 指定 し て 1 件 の 要素 を 取得 し ます 。 
Q る 

A) getElementsByName 

B) [0] 


getElementsByName は 、 対 象 の 要素 が 1 件 の 場合 で も 配列 と 同様 の 形式 で 戻り 値 を 返し ま 
す 。 よ っ て イン デック ス を 指定 する 必要 が あり ます 。 


Q3 

className 

class 属性 を 変更 する に は 、className プロ パテ ィ を 利用 し ます 。 
Q4 

十 三 


圏 開 要素 が 持っ て いる 内 容 の 後ろ に HTML 文 字 列 を 挿入 する 場合 は 、+ ニ 演算 子 で innerHTML に 
連結 させ ます 。 ニニ 演算 子 を 使う と 内 容 を 置き 換え て し まう の で 注意 し まし ょ う 。 


Q5 
window.onload = fun 


onload イ ベン ト ハ ンド ラ の み 、window.onload と 記述 し ます 。 定義 済み の 関数 を 設定 する に 
は 関数 名 だ け を 記述 し て 、 丸 か っ こ ( ) は つけ ませ ん 。 


旬 1 0 


CheckWPest1 

Q 1 

クロ ス ブ ラ ウザ 問題 

國 還 jQuery は 、 ブ ラウ ザ の 違い を 吸収 し 、 ク ロス ブラ ウザ 問題 を 解決 し て くれ ます 。 
CheckWPegst る 

Q⑳1 


ぐ soript> 要素 で jQuery (jquery-X.X.X.min.jS) を 読み 込み ます 。 


Q1 
LightBox 系 プラ グイ ン 
jQuery プラ グイ ン の 中 で も 、LightBox 系 プラ グイ ン は 非常 に 多く の 種類 が 開発 され て いま す 。 


Q る 
< く 8CY1p 上 8rC= "SC エ 1Dt8/] 吉 uery-1 .9.1 .min.]8"></ 8C エ 1p セ > 
関 較 終 了 タ グ が 必要 で す 。 


介 8y 


Check"Pest1 
Q1 


ペー ジ 上 の HTML タグ が 解析 され 、DOM が 利用 可能 と な っ た タイ ミン グ 。 
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Q る 


$ (function(){ )): 


CheckWTPest る 

Q 1 

diV D 

「<div> 要素 の 中 の すべ て の ぐ p> 要素 」 が 対象 な の で 、 孫 要素 以下 も 取得 で きる 子孫 セレ ク 
タ を 使い ます 。 

Q⑳ る 

diV >* 

匿 拭 すべ て の 子 要素 に 対し て 処理 を 実行 する に は 、 子 セレ クタ の 子 要素 を 全 称 セレ クタ で 指定 し ます 。 


CheckYTPestS3 

Q⑳1 

和 first 

div 要 素 の 子 要素 の 中 で 、 最 も 先頭 の 要素 を 抽出 し ます 。 

Q る 

[name= デ hoge 

id、class 以 外 の 属性 を 柔 件 と し て 要素 を 検索 する に は 、 属 性 フィ ル タ を 利用 し ます 。 


CheckTPest4 

Q 1 

A) on 

B) html 

On メゾ ソ ッ ド で イベ ント ハン ドラ を 登録 し 、html メ ソ ッ ド で 要素 の 内 容 を 操作 し ます 。 
Q る 

A) attr 

B) name 

関 世 value 以外 の 属性 値 を 操作 する に は 、attr メ ソ ッ ド を 使い ます 。 


この 草 の 到 達 礎 チェ ッ ク 
Q 1 


D,#hOg@ 
了 抽 複数 の 条件 で 要素 を 検索 する 場合 は 、 グ ルー プ セ レク タ を 使い ます 。 


Q⑳ る 
Off 
off メ ゾ ソ ッ ド は 、 引 数 を 省略 し た 場合 すべ て の イベ ント ハン ドラ を 削除 し ます 。 


Q3 

fter 

隊 調 要素 群 に 対し て 絞り 込み を か ける に は filter メ ソ ッ ド を 利用 し ます 。 メ ソ ッ ド チェ ー ン を 利用 
する と 、 セ レク タ で 取得 し た 要素 に 対し て いく つも の 処理 を 実行 する こと が で きま す 。 





Q4 

A) click 

B) toggleClasS 

toggleClass メソッド は 、 呼 び 出 され る た びに CSS クラ ス の 追加 と 削除 を 交互 に 実行 し ます 。 

Q5 

replaceWith 

ある 要素 を 異な る 要素 に 置き 換え る 場合 は 、replaceWith メ ソ ッ ド を 使い ます 。 

Q6 

DDend 

甘 皇 要素 が 持つ 子 要素 の 未 尾 に 項目 を 追加 し ます 。 先頭 に 追加 する 場合 は Drepend メ ソ ッ ド を 使 
いま す 。 

Q⑳7 

A) empty 

B) after 

empty メソ ッ ド は 子 要素 を すべ て 削除 し 、after メ ソ ッ ド は 要素 の 後ろ に 兄弟 要素 を 追加 し ます 。 


争 9 0 


CheckK'TPest1 
Q 1 


logad 
load メソッド は HTML を 読み 込み 、 要 素 に 挿入 し ます 。 


Q る 





$ ( "divY") .1oad ("sampl1e .htm1 #hoge") : 
URL の 後ろ に スペ ー ス を 挟ん で セレ クタ を 記述 し ます 。 


この 草 の 到 達 度 チェ ッ ク 





.getJSON 

員 . か ら 始ま り ま す 。 

Q4 

プロ パテ ィ 名 が ダブ ルク ォ ー ト で 囲ま れ て いま せん 。 ま た 、 シ ング ルク ォ ー ト () が 利用 
され て いま す 。 
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避 抽 JSON は 、 文 字 列 は すべ て ダブ ルク ォ ー ト ) で 囲み ます 。 





クロ ス ドメイン 通信 

衣 抽 JSONP を 使え ば 、 ク ロス ドメイン 通信 を 実現 する こと が で きま す 。 

Q6 

CallDaCk ニ ? 

謎 拉 ? の 部 分 は getJSDN メ ソ ッ ド の ら つ づつ 目 の 引数 で 指定 し た コー ル バ ッ ク 関 数 に 置換 され ます 。 


争 4 


CheckKWTPest1 
Q1 


tOggl@ 

tOggle メソ ッ ド は 、 実 行 す る た びに 要素 の 表示 / 非 表示 を 切り 替え ます 。 
Q る 

1000 


淫 和 アニメーション の 速 さ は ミリ 秒 単位 で 指定 し ます 。 そ の 他 に "slow"、"normal"、"fast" が あり 
ます 。 


Q1 
"WIOth" : "4UO0Dx", "heighf" "どら 50px" 
張 』 CSS プロ パテ ィ 間 は カン マ で 区 切り ます 。 
Q2 
| 一定 速度 で 動く ] と いう 意味 で す 。 
イー ジン グ に は linear と Swing が あり ます 。 
QS 
300Dx 


animate メ ソ ッ ド で は 、 複 合 代入 演算 子 を 使っ て CSS プロ バ パティ 値 に 加減 算 を 行なう こと が 
で きま す 。 


4 

nimate 

animate メ ゾ ソ ッ ド を メソ ッ ド チェ ー ン で つなげ て 実行 する と 、 複 数 の アニ メー ショ ン を 順番 
に 実行 する こと が で きま す 。 

Q5 

な に も 表示 され ませ ん 。 

ペー ジ が 表示 され る と 同時 に hide メソ ッ ド で く img> 要素 を 非 表 示 に し て いる の で 、 そ の 後 の 
animate メソ ッ ド の 動き は 見 る こと が で きま せん 。 

96 


く img> 要素 が 徐々 に 大 きく な り 、 幅 が 400px に な る と 見 えな く な り ま す 。 

















人 080 人 0 40720 が 
MI 


病 」 り WW 7 
訓 凍り WW MM M 






コー ル バ ッ ク 関 数 の toPassive の 中 で <imgz> 要素 を 非 表 示 に し て いま す 。 コ ー ル バッ ク 関 数 
は アニ メー ショ ン が 完了 し た タイ ミン グ で 実行 され ます 。 
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PT 36 
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